iTunesアプリでHTML,CSS,JavaScriptを扱う
無料でオフライン下で出来るJavaScriptプログラミング
jsany
http://itunes.apple.com/jp/app/javascript-anywhere/id363452277?mt=8
jsanyはiPodやiPhoneでオフライン下で動く便利なWeb製作アプリです。操作する端末がPCであるため、使う人にとっては使いにくいと思います(特にPC派の人)
しかしながらパソコンなしで、実際に実行結果を端末の画面で確認できるのが良いところです。
製作物は最初からHTML,CSS,JavaScriptの3つのファイルに分けられています。必要最低限のソースも打ってくれてあるので、新しい製作物を作るとき態々そのタグを入力する必要もありません。
jsanyの良いところは、オンライン下であるとき、外部のファイルが読み込めるところにあります。
Web製作では予め用意している画像を用いることもあると思います。その画像をオンライン時にはURLを指定して呼び出すことも可能です。
辞書登録なんかをしておくと良いかもしれません。
よく使う外部ファイルや、各関数を予め辞書登録しておき、任意の文字列で呼び出す等してみると飛躍的に操作性はあがります。
例)
入力 : かんすう
出力 : function name(){}
入力 : いめーじ
出力 : http://www.hoge.ne.jp/hoge.png
このようにしておけばパソコンでは数秒で出来る作業を分単位で製作しなければならない、という状況を防ぐことが出来ます。
大規模なプログラミングは出来ませんが、通学や通勤中の思いつきのソースを打ち込む分には使えると思います。
はてなブックマークの騒動に関してちょっと搜索
全体の推移
事が大きく進んだ要因として、Twitterでの@HiromitsuTakagiの発言が発端です。
https://twitter.com/#!/HiromitsuTakagi/status/178147856937517056
最初のつぶやきから二日ほどではてなからの謝罪の日記が投稿されました
http://hatena.g.hatena.ne.jp/hatena/20120313/1331629384
トラッキング問題について
はてなブックマークのトラッキング問題ですが、トラッキングが一番の問題となりました。トラッキングとはユーザーの行動を監視して情報を収集する手段です。具体的な例として、アクセスしているブラウザの判別やクリックした対象などのあらゆるデータをユーザーが行うたびに収集して保存します。
最終的にこれで各ユーザーの行動の総和をとり、メディアの利用者の傾向を図るわけですが。
今回問題になったのは第三者への提供且つ、無料という所に大きな問題があったようです。
トラッキングはWebの維持に用いられる頻度が少ないうえ、ユーザーに告知なしに第三者に提供してしまった事による、問題が主となっているようです。
はてなブックマークははてなの一番中枢にあたる部分でもあるサービスであるため、かなりはてなには都合の悪い事件だったと思います。
一部のユーザーでは、はてなブックマークを使用するのをやめたり、はてな自体を退会してしまったユーザーも少なからずいるようです。
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
