2007年12月アーカイブ
HTMLソース
<input type="text" />
<select>
<option value="test">test</option>
</select>
このように単純に記述して表示してみると若干inputの方が高さが少ない。
これを回避する方法だが、いたって簡単。
CSSを以下のようにする。
CSSソース
input { margin:0; padding:1px;}
select { margin:0; padding:0;}
inputにpadding:1px;をつけることで、高さをあわせることができる。
がたがたしてるとなんか嫌ですよね。
勉強のためにRSSリーダー風のレイアウトにCSSを適用してみた。
それにしてもFlexはXHTML + CSS + Javascriptによく似ている。
しかも開発スピードが非常に早い。
下のモックも朝30分ほどでできた。HTMLじゃ2,3日以上かかってただろう。
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="style.css" />
<mx:HDividedBox top="10" right="10" bottom="10" left="10">
<mx:Panel width="25%" height="100%" layout="absolute" title="メニュー">
<mx:Accordion top="35" right="10" bottom="10" left="10">
<mx:HBox label="MXML" width="100%" height="100%">
<mx:List width="100%" height="100%">
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
<mx:Object label="aaaa" />
</mx:List>
</mx:HBox>
<mx:HBox label="CSS" width="100%" height="100%">
</mx:HBox>
<mx:HBox label="ActionScript" width="100%" height="100%">
</mx:HBox>
</mx:Accordion>
</mx:Panel>
<mx:VDividedBox width="75%" height="100%">
<mx:Panel width="100%" height="50%" layout="absolute" title="ビュー">
<mx:DateField top="35" right="10" bottom="10" left="10" />
</mx:Panel>
<mx:Panel width="100%" height="50%" layout="absolute" title="ソース">
<mx:RichTextEditor top="35" right="10" bottom="10" left="10" styleName="Rtext">
</mx:RichTextEditor>
</mx:Panel>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
CSS
Application {background-color:#000;}
Panel {
borderStyle: solid;
borderColor: #666666;
borderAlpha: 1;
borderThickness: 0;
borderThicknessLeft: 10;
borderThicknessTop: 0;
borderThicknessBottom: 10;
borderThicknessRight: 10;
roundedBottomCorners: true;
cornerRadius: 3;
headerHeight: 26;
backgroundAlpha: 0.74;
highlightAlphas: 0.52, 0.13;
headerColors: #000000, #333333;
backgroundColor: #ffffff;
dropShadowEnabled: true;
shadowDistance: 0;
titleStyleName: "mypanelTitle";
}.mypanelTitle {
letterSpacing: 0;
color: #ffffff;
}.Rtext {
borderStyle: none;
borderColor: #666666;
borderAlpha: 1;
borderThickness: 0;
borderThicknessLeft: 10;
borderThicknessTop: 0;
borderThicknessBottom: 10;
borderThicknessRight: 10;
roundedBottomCorners: true;
cornerRadius: 0;
headerHeight: 0;
backgroundAlpha: 0;
highlightAlphas: 0.52, 0.13;
headerColors: #000000, #333333;
backgroundColor: #ffffff;
dropShadowEnabled: true;
shadowDistance: 0;
titleStyleName: "Rtexttitle";
}.Rtexttitle {
letterSpacing: 0;
color: #ffffff;
}
参考サイト
巷で話題のFlexをちょっといじったのでメモ。
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="style.css"/>
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%" top="10" right="10" bottom="10" left="10">
<mx:VBox width="30%" height="100%">
<mx:Panel width="100%" height="100%" title="RSS一覧" layout="absolute" styleName="Panel02">
<mx:VBox top="45" right="10" bottom="10" left="10">
<mx:List width="100%" height="100%" styleName="List01">
<mx:Object label="リスト1" />
<mx:Object label="リスト2" />
<mx:Object label="リスト3" />
<mx:Object label="リスト4" />
<mx:Object label="リスト5" />
<mx:Object label="リスト6" />
</mx:List>
<mx:ControlBar width="100%" horizontalAlign="center">
<mx:Button label="+"/>
<mx:Button label="-"/>
</mx:ControlBar>
</mx:VBox>
</mx:Panel>
</mx:VBox>
<mx:VDividedBox width="100%" height="100%">
<mx:Panel width="100%" height="30%" title="記事一覧" layout="absolute" styleName="Panel01">
<mx:VBox top="45" right="10" bottom="10" left="10">
<mx:List width="100%" height="100%">
<mx:Object label=" 記事リスト1" />
<mx:Object label=" 記事リスト2" />
<mx:Object label=" 記事リスト3" />
<mx:Object label=" 記事リスト4" />
<mx:Object label=" 記事リスト5" />
<mx:Object label=" 記事リスト6" />
<mx:Object label=" 記事リスト7" />
<mx:Object label=" 記事リスト8" />
<mx:Object label=" 記事リスト9" />
<mx:Object label=" 記事リスト10" />
<mx:Object label=" 記事リスト11" />
</mx:List>
</mx:VBox>
</mx:Panel>
<mx:Panel width="100%" height="70%" title="内容" layout="absolute" styleName="Panel01">
<mx:TextArea top="45" right="10" bottom="10" left="10" styleName="TextArea" />
</mx:Panel>
</mx:VDividedBox>
</mx:HDividedBox>
</mx:Application>
PHPを使えばファイルを読み込ませることが簡単にできます。
この他にも読み込み方がいくつかありますが、シンプルな方法がこれ。
ファイルの読み込み
<?php require_once("file.php"); ?>
本番環境ではPHPのエラーを表示しないようしていしましょう。
php.ini、.htaccessと直接ファイルに記述する方法があります。
php.ini
display_errors = Off
.htaccess
php_flag display_errors = Off
重要なデータを保存しておくときに利用するセッションの操作方法
セッションの保存
<?php
session_start(); //セッションを使う際必ず入れる
$name = "入れるデータ";
$_SESSION["name"] = $name; //セッションにデータを保存
?>
セッションの削除
<?php
session_start(); //セッションを使う際必ず入れる
unset($_SESSION); //セッションを削除
?>
セッションの削除2（推薦：データを完全に削除します。）
<?php
session_start(); //セッションを使う際必ず入れる
session_destroy(); //セッションを削除
?>
ショッピングサイトなどでページ移動の際のデータのやり取りなどに使われてますね。
PHPでは簡単にクッキー（Cookie）の操作を行えます。
クッキーの保存
<?php
$name = "内容";
setcookie("name", $name, time()+3600); //("クッキー名", $name, time()+保存していたい時間)
?>
クッキーの削除
<?php
setcookie("name"); //("削除するクッキー名")
?>
クッキーは利用者のパソコン内にデータを保存するのでセキュリティ的によろしくありません。
なのであまり重要でないデータのみに有効です。
重要なデータを保存しておきたい場合は、セッションを使うようにしましょう。
何日から何日まで表示したいというときに使えそう。
phpデータ
<?php
//$NowStamp = mktime(0, 0, 0, 12, 32, 2007); //現在の日時テスト(時間,分,秒,月,日,年)
$NowStamp = mktime(0, 0, 0, date("m"), date("d"), date("y")); //現在の日時(時間,分,秒,月,日,年)
$TimeStamp = mktime(0, 0, 0, 01, 01, 2008); //表示開始の日時(時間,分,秒,月,日,年)
$TimeStampEnd = mktime(0, 0, 0, 01, 10, 2008); //表示終了の日時(時間,分,秒,月,日,年)
?><?php
//日付の比較
if(($NowStamp >= $TimeStamp) and ($NowStamp <= $TimeStampEnd)){
?>一致した時に表示するコンテンツ
<?php
} else {
?>一致しなかった時に表示するコンテンツ
<?php
}
?>
Fileのデータを1行ずつ処理させるのバージョンアップ版です。
ファイルのデータを1行ずつ処理させるプログラムですが、開始行数・終了行数を指定できるようになりました。
勉強中に作っているプログラムなので、利用されるかたは自己責任でお願いします。
表示結果
20081216
名前8
http://d.hatena.ne.jp/ryuichi1com/
sss
20081216
名前9
http://d.hatena.ne.jp/ryuichi1com/
sss
20081216
名前10
http://d.hatena.ne.jp/ryuichi1com/
sss
20081216
名前11
http://d.hatena.ne.jp/ryuichi1com/
sss
20081216
名前12
http://d.hatena.ne.jp/ryuichi1com/
sss
必要なファイル
- root
- index.php
- datafile.txt
phpデータ
<?php
class ImgLogEdit {
function ImgLog($FileType,$Stert,$End){
$fp = fopen ($FileType, "r");
while (!feof ($fp)) { //!feof ($fp)
for($i = 0;!feof($fp);$i++) //読み込みの繰り返し
{
$line[$i] = fgets($fp); //ファイルデータを配列に格納
}
}
fclose ($fp); //ファイルclose
//line配列の読み出し開始
for($j = $Stert; $j < $End; $j++){ //指定行数のデータを取得
$array = split("-&",$line[$j]); //ファイルデータを配列化
for($k = 0; $k < count($array); $k++){
echo $array[$k] . "<br />\n";
}
}
}
}
$Obj = new ImgLogEdit;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
//ファイル読み出し関数を呼び出し('読み込むファイル','読み込み開始行数','読み込み終了関数')
$Obj->ImgLog('data/datafile.txt','7','14');
?>
</body>
</html>
データtxtファイル
「-&」でデータを分けています。
20081216-&名前1-&http://d.hatena.ne.jp/ryuichi1com/-&xxx
20081216-&名前2-&http://d.hatena.ne.jp/ryuichi1com/-&rrr
20081216-&名前3-&http://d.hatena.ne.jp/ryuichi1com/-&yyy
20081216-&名前4-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前5-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前6-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前7-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前8-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前9-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前10-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前11-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前12-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前13-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前14-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前15-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前16-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前17-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前18-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前18-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前20-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前21-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前22-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前23-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前24-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前25-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前26-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前27-&http://d.hatena.ne.jp/ryuichi1com/-&sss
20081216-&名前28-&http://d.hatena.ne.jp/ryuichi1com/-&sss
使い方
表示させたい位置に以下のソースを挿入します。
<?php
//ファイル読み出し関数を呼び出し('読み込むファイル','読み込み開始行数','読み込み終了関数')
$Obj->ImgLog('data/datafile.txt','7','14');
?>
そして、「ImgLog('data/datafile.txt','7','14');」この部分に読み込むデータファイル、読み込み開始行数、読み込み終了行数を指定します。
この部分を改造すれば、データをページ分けして表示できますね。
データベースを使わずにデータを蓄積する際使えるかも。
勉強用なのでコピーして使う方は自己責任でお願いします。
必要なファイル
- root
- index.php
- datafile.txt
PHPファイル
<?php
class ImgLogEdit {
function ImgLog($FileType){
$fp = fopen ($FileType, "r"); //データファイルの読み込み
while (!feof ($fp)) {
$buffer = fgets($fp, 4096);
$array = split("-&",$buffer); //配列に挿入
echo $array[0] . "<br />\n"; //配列の読み出し
echo $array[1] . "<br />\n";
echo $array[2] . "<br />\n";
}
fclose ($fp);
}
}
$Obj = new ImgLogEdit;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
$Obj->ImgLog('datafile.txt'); //データの出力('読み込みファイルの指定');
?>
</body>
</html>
データtxtファイル
20081216-&名前-&http://d.hatena.ne.jp/ryuichi1com/
20081216-&名前-&http://d.hatena.ne.jp/ryuichi1com/
20081216-&名前-&http://d.hatena.ne.jp/ryuichi1com/
20081216-&名前-&http://d.hatena.ne.jp/ryuichi1com/
もっと利便性の高くなるようにしないと。
レポートのデザインを一新したGoogle Analytics は、サイトを訪問したユーザーの参照元やサイト内での行動が、さらに把握しやすくなりました。
とのこと。
比較機能がまあまあ便利かなぁ、でも曜日が合わないのでグラフが見にくい。
わざわざ曜日合わせないといけないのはちょっとめんどっ
前々から気になっていたテキストエリアの任意の場所にテキストを挿入する方法がわかったので、メモ代わりに載せておきます。
※prototype.js依存ですのでご注意ください。
また、prototype.jsに関しては過去のエントリーで確認してください。
必要なファイル
- root
- prototype.js
- index.html
HTMLソース
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prototype.jsでテキストエリアに絵文字式入力</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function InEmoji(InTexts,elements){
var Txtarea = $(elements);
InTexts = '' + InTexts + '';
if(navigator.appName.indexOf("Microsoft") > -1){
Txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=InTexts;
Txtarea.focus();
} else {
if (Txtarea.createTextRange && Txtarea.caretPos) {
var caretPos = Txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? InTexts + '' : InTexts;
Txtarea.focus();
} else {
var length = Txtarea.textLength;
var start = Txtarea.selectionStart;
var end = Txtarea.selectionEnd;
var Txtarea1 = Txtarea.value.substring(0, start);
var Txtarea2 = Txtarea.value.substr(end, length);
Txtarea.value = Txtarea1 + InTexts + Txtarea2;
Txtarea.focus();
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onclick="InEmoji('こんにちは','form')">こんにちはを入力</a></li>
<li><a href="javascript:void(0)" onclick="InEmoji('ほえ～～','form')">ほえ～～を入力</a></li><li><a href="javascript:void(0)" onclick="InEmoji('濃い茶','form')">濃い茶を入力</a></li>
<li><a href="javascript:void(0)" onclick="InEmoji('javascript','form')">javascriptを入力</a></li>
<li><a href="javascript:void(0)" onclick="InEmoji('<h1></h1>','form')">タグも入力できたり？</a></li>
</ul>
<textarea name="source" cols="100" rows="20" id="form">ここにフォーカスかせて入力してみて→←ここだよここ</textarea>
</body>
</html>
javascriptソース
function InEmoji(InTexts,elements){
var Txtarea = $(elements);
InTexts = '' + InTexts + '';
if(navigator.appName.indexOf("Microsoft") > -1){
Txtarea.focus();
if (!document.selection) return;
var range = document.selection.createRange();
range.text=InTexts;
Txtarea.focus();
} else {
if (Txtarea.createTextRange && Txtarea.caretPos) {
var caretPos = Txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? InTexts + '' : InTexts;
Txtarea.focus();
} else {
var length = Txtarea.textLength;
var start = Txtarea.selectionStart;
var end = Txtarea.selectionEnd;
var Txtarea1 = Txtarea.value.substring(0, start);
var Txtarea2 = Txtarea.value.substr(end, length);
Txtarea.value = Txtarea1 + InTexts + Txtarea2;
Txtarea.focus();
}
}
}
このスクリプトの使い道は色々ありますが、たとえば簡易エディタ、絵文字入力（サーバー側で絵文字に変換させる）、入力補助等考えれば色々使えるんじゃないでしょうか？
使い方はいたって簡単！
prototype.jsを読み込んでいることを前提として
イベントハンドラで onclick="InEmoji('入力させたい文字','入力させるテキストエリアのid')"を記述する。
今更な内容ですが書くネタをすぐに見つけられなかったのでtoggleです（笑）
prototype.jsに関しては前回のエントリーを参考にしてください。
今回使用するファイル
- root
- prototype.js
- index.html
HTMLソース
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prototype.jsで表示・非表示</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function Toggle(elements) {
var item = $(elements);
Element.toggle(item);
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="Toggle('MenuList')">表示非表示</a>
<ul id="MenuList">
<li>リストです。</li>
<li>隠さないで！</li>
<li>早く隠して！！</li>
</ul>
</body>
</html>
javascriptソース
function Toggle(elements) {
var item = $(elements);
Element.toggle(item);
}
多少javascriptの知識があればprototype.jsを使うことでちょっとしたwebアプリケーションを作ることができちゃったりします。
今回は要素にonclick="Toggle('表示非表示させたいid')"を入力すればあ～ら簡単（笑）
表示非表示メニューのできあがり。
prototype.jsを使うことで簡単にDOMの操作等を行うことができます。
まずは、Prototype.jsの配布サイトからダウンロードしてきましょう。
今回使用するファイル
- root
- index.html（訂正。つい癖で.phpと書いてました）
- prototype.js
- test.txt
読み込みファイル（.txtでなくても可能。今回はtest.txt）
読み込みに成