HTML5タグの許可についてフィードバックしました
今流行りのやさしさゴシックをはてなブログに適応させる
やさしさゴシックフォントのブログ製作
cssのfont-familyプロパティで、文字の装飾を行うことができますが、基本的にクライアント側に適応させるフォントを「ダウンロードさせている」を条件に動いているため、万が一フォントに対応していない場合はユーザビリティは損なわないものの、font装飾を施した意味がなくなってしまいます。
今回はcssで使える@規則というものを使ってフォントを適応させていない(いわば新しく作られたフォントなど)をクライアントに読み込ませて、適応させるという方法をとります。
やさしさゴシックの使用に制限はありませんので、各自アップローダにttf(TrueTypwFont)ファイルをアップロードさせて直リンクさせてください。
やさしさゴシック提供サイト
http://www.fontna.com/blog/379/
サイトをスクロールさせていくとダウンロードする画像アイコンが見つかりますので適当に保存してください。
ダウンロードされたファイルのうちルート直下にある 07やさしさゴシック.ttf を Yasasisa.ttf などと日本語を英数字に変えてください、基本的にアップロードできる名称に変えてもらえればOKです。
Sample1
@font-face{ /* @ルールフォントを指定*/
font-family: "Yasasisa"; /* 適当なフォント名を付ける、他のフォント名を重ねない*/ src: url(http://yatagarasu0495.web.fc2.com/css/font/yasasisaGothic.ttf); /* ttfファイルのリンクを貼る */
} body{
font-family: "Yasasisa"; /* 通常のfont-familyで追加した適当なフォント名を指定する*/
}
基本的にはこれで適応されますが、注意として body セレクタははてなのCSS編集で既に追加してあるので、新しくbodyセレクタを追加せずに追記する形で記入しましょう。
body以外にもp要素など特定の要素だけに適応させてもいいです。
ただフォント名に日本語を使うと、仕様かは分かりませんが、はてなのスタイルシートが全部崩れるのでその辺は気をつけてください。
(普通のテキストエディタで編集する分には問題無い)
(このブログのフォントもやさしさゴシックを使用してます)
JavaScriptでアラートダイアログを改装する
alert()を直接使わずにdivにスタイルを適応させて製作する
今回はJavaScriptでお馴染みの第一歩であり、デバッグ用に使われるalertメソッドですが
見た目が予想以上に殺風景ですので(特にfirefox)独自作成してみました。
alertを装飾するjQueryライブラリはいくつかあるので先に紹介しておきます。
実装は以下の通りです。
IE未対応
http://yatagarasu0495.web.fc2.com/javascript/blog/alert/01.html
createElementとappendChildで要素を挿入し、削除にはremoveChildを使っています。
基本的にスタイルシートのdisplay:none;が使えそうな気もしますが、あえてソースに無駄なコードを増やさないために(display:noneを使うと画面上要素は消えるがソースは取り残される)
追加と削除を繰り返す形で実装しました。
JavaScriptでDOMを操作するとき$セレクタ(jQuery)の利用も便利
DOMのもうひとつの見方
JavaScriptにはDOMの概念でhtmlのツリー構造に当たる隅々の要素までアクセス出来る仕組みがあります。用いられる書き方として
Sample1
document.getElementById("id名"); //値
document.getElementsByTagName("タグ名"); //配列
document.getElementsByName("name名"); //配列
document.getElementsByClassName("class名"); //配列
主に代表的に使われる要素の取り出しとして容易されているものですが、比較的に記述が長い上にid以外は配列で取り出さなければならないという煩わしさがあります。
基本的にclass名やタグ名の全部の要素を取り出して値等を変更するにはfor文でループさせれば良いわけですがこれも煩わしさの一つとなります。
Sample2
for( i=0 ; i < element.length ; i++){
document.getElementsByTagName("h1")[i].style.color = "#F00";
//h1要素の文字を全て赤字にする
}
そこで使えるのが$セレクタです。
基本的に$セレクタはjQueryで頻繁に出てくるというか、$セレクタで動くのがjQueryですので当たり前と言えば当たり前ですが、これをJavaScriptのDOMに結びつけると比較的容易に要素を操作することが出来ます。
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/JavaScript"
></script> //jQueryURL
<script type="text/javascript">
$(function() {
$('.test').append("何か"); //要素の追加
});
</script>
DOMの操作で要素の追加というものがありますが、jQueryの$セレクタを使えば容易に行うことが出来ます。
基本的にこのソースの場合class名がtestである要素全てに効果を適応させる事ができます。
これにより無駄にforでソースを回す必要もなくなります。
最初の無名関数を$セレクタで囲ってあるのはJavaScriptでいうwindow.onload = function(){}と同じ意味合いです。
ロードをし終えた後にスクリプトを読み込むので先にスクリプトを読み込んでしまってgetElementById is defindみたいなバグを抑える事も出来ます。
jQueryはただライブラリとしての実用だけでなく、JavaScriptの構文を容易にする面もありますので使ってみると良いかもしれません。
PHPで簡易ログインサイト
ログイン者とログアウト者で振り分ける
よくわかるPHPの教科書を読み始めて3日ほどになりますが、実際にサイトを製作してみました。
http://www35.atpages.jp/~flandlescarlet/php/login/loginhome.php
基本的にログインしていない状態でメインのサイトを見ようとすると
ログアウトしてくださいと注意を促します。
また今回はデータを二つ用意して二人の会員を予め用意してみました。
(mySQLがまだまだ初心者状態なため会員登録ができるところまでは作成できませんでしたが)
ちなみにログイン用のアカウントは
ID : hatena
Pass : 12345
ID : flan
Pass : 0495
PHPを本格的に始め思った事
グローバル変数利用の違いを見極める必要性
基本的にPHPとJavaScriptで決定的に違う内容として
コンテンツの書き込みがあります。JavaScriptはセキュリティのためにCookie以外での直接的なデータの保存や書き込みはできないものです。
PHPはJavaScriptに比べて予め用意された関数が多いように感じました。結果的にPHPにはDOMやイベント関係の要素が抜けるので大半は必要に応じて関数を調べるといった感じになると思います。(触りを見ての意見)
PHPで今回扱ったグローバル変数で$_FILES,$_POST,$_GET,$SESSION,$COOKIE,$REQUEST
基本的にどのグローバル変数でも常にセキュリティの意識と向かい合わせになっています。
各グローバル変数の注意についてまとめてみました。
$_GET
フォームのメソッドをgetにすることで得られるグローバル変数。送信時に?(プロパティ)の後ろにvalue値が追加される仕組みとなっている。
良点としては結果がURLに現れるのでブックマークしておける
欠点としては暗号等重要な送信内容の時はデータが筒抜けになるので適応してはいけない、また短いデータしか活用できない。
$_POST
フォームのメソッドをpostにすることで得られるグローバル変数、特に変化は見られない。
良点として比較的長い文章でも送信が可能になる。
$_SESSION
$_GET及び$_POSTの値を代入する事で一時的にデータを保存する事ができるグローバル変数。効果はWebページが閉じられるまで続く。
良点として、ログイン関係等、うっかりログアウトすることを忘れてしまってもWebページを閉じると同時に自動的にsessionデータも消えるのでセキュリティの面で良い
欠点としてWebを閉じる事でデータが消えてしまうため長期に渡るデータの保管ができない。
$_COOKIE
setcookie("Cookie名" , "保存するCookieの変数や値" , "保存期間") により設定してデータを補完するグローバル変数。
良点として自由自在に値の保管を決められるため自由性が高い。
欠点として一定期間保存するため、ログイン関係での日付調整が必要となる。
$_FILES
フォームのメソッド値をpostにしてグローバル変数が得られる(連想配列式)
良点としてファイルを受信できるので需要度が比較的高まる。
欠点として得られるファイルの情報がわからないので厳密に分岐して安全なファイルを得られるようにソースを記述しなければならない(ファイルのサイズに拡張子等)
ざっと見た感じ、PHPはデータ処理系が多くそれで一塊な感じがしました。
関数もJavaScriptと類似するものとして(rand , substr , math系)関数に関しては多量にあるので必要な情報だけ調べて得るのが正解かなと思いました。
JavaScriptイベントの種類
JavaScriptで扱うイベントをまとめてみる
- onabort : 読み込みを中断した時
- onblur : 要素がフォーカスを失った時
- oncanplay : 再生が可能になった時
- oncanplaythough : 再生が途切れない状態になった時
- onchange : 属性の値が変わった時
- onclick : クリックされた時
- oncontextmenu : 右クリックされた時
- oncuechange : テキストトラックキューが変化した時
- ondblclick : ダブルクリックされた時
- ondrag : ドラッグ中の時
- ondragend : ドラッグが終了した時
- ondragleave : ドラッグ可能なオブジェクトから離れた時
- ondragover : ドラッグ可能なオブジェクトに重なっている時
- ondragstart : ドラッグが開始された時
- ondrop : ドロップされた時
- ondurationchange: メディアの長さが変わった時
- onemptied : 再生中にネットワークが利用不可となった時
- onended : メディアの最後に到達した時
- onerror : ファイル読み込み中にエラーが起きた時
- onfocus : フォーカスされた時
- onformchange : フォームに変化があった時
- onforminput : フォームにユーザーが入力した時
- oninput : フォームの要素にユーザーが入力した時
- oninvalid : フォームの要素の値が不正になった時
- onkedown : キーが押された時
- onkeypress : キーが押されて離された時
- onkeyup : キーが離された時
- onload : 読み込みが終了した時
- onloadeddata : メディアのデータの読み込みが終わっっ時
- onloadstart : メディアの読み込みが始まった時
- onmousedown : マウスのボタンが押された時
- onmousemove : マウスポインタが移動した時
- onmouseout : マウスポインタが要素から離れた時
- onmouseover : マウスポインタが要素に入った時
- onmouseup : マウスのボタンが離された時
- onmousewheel : マウスのホイールが回された時
- onpause : メディアの再生が一時停止した時
- onplay : メディアの再生の準備が出来た時
- onplaying : メディアの再生が始まっている時
- onprogress : メディアのデータを処理している時
- onratechange : 再生レートが変化した時
- onreset : フォームがリセットされた時
- onresize : ウインドウの幅が変化した時
- onscroll : スクロールバーが操作された時
- onseeked : メディアの頭出しが終わった時
- onseeking : メディアの頭出しが始まった時
- onselect : 要素がセレクトされた時
- onshow : 表示されるとき
- onstalled : メディアデータの読み込みができなくなった時
- onsubmit : フォームの送信ボタンが押された時
- onsuspend : メディアデータの読み込みが止まった時
- ontimeupdate : 再生位置が変化した時
- onvolumechange : ボリュームが変化した時
- onwaiting : 再生が一時中断した時
