2014年07月22日17時00分

池澤あやかが教えるTumblr講座「ソースコードを見る」

  • このエントリーをはてなブックマークに追加
  • Pocket

 女優の池澤あやかちゃんは、文句なしの美女でありながら、Ruby界でも女神と呼ばれるほどの「本物」っぷりを発揮しているガチでギークな女優。「ばりばりプログラムができる」特技を生かして活躍中です。

 そんな池澤あやかちゃんが、ウェブサービス「Tumblr」の使い方やカスタマイズ方法などについて解説する連載がスタートしました。「Tumblrって聞いたことはあるけど、どういうものかわからない」「一応、登録はしているけどいまは全然使ってない」という初心者に向けて、わかりやすく解説します。これまでTumblrの一般的な使い方を見てきましたが、ここからはTumblrブログをオリジナルにカスタマイズするなど、一歩踏み込んだ使い方を紹介していきます。そこで大事になる、ソースコードについて見ていきましょう。

ソースコードを見れば骨組みがわかる

 「Tumblrブログのテーマのカスタマイズで、『HTMLを編集』というものを紹介しましたが、Tumblrブログに限らずウェブサイトはすべてこうした文字列によって書かれています。そうした文字列を大きく『ソースコード』と呼び、ウェブブラウザー上から確認できます」

 「開いたウェブページの適当な部分を右クリックしてみてください。Safariなら『ページのソースを表示』が選べるはずです。選択すると、そのページのソースコードが表示されます。そしてTumblrサイトはこのソースコードに遊び心が加わっていて、『tumblr』と書かれたアスキーアートが入っています。実は私のTumblrブログもソースコードにアスキーアートを隠しているので、開いてみてください(笑)」

20140722_arai_tumblr_source
ウェブサイト上で右クリックすると、「ページのソースを表示」が表れ、ページのソースコードを確認できます
20140722_arai_tumblr_source
Tumblrサイトのソースコードには、ヘッダー部分に「tumblr」というアスキーアートが隠されています。小ネタとして使えます

 「ソースコードは文字列が並んでいるだけなのですが、どのようなJava Scriptが使われていて、動作を決めているのかといったことなどもわかります。例えば下にスクロールしていくと、どんどんとコンテンツを読み込んで表示していくTumblrブログがありますが、これは『infinitescroll』と呼ばれるJava Scriptを利用しています。また、『masonry』というJava Scriptは、ウィンドウのサイズを変更するとそれに合わせてコンテンツをレンガ状に並べ替えてくれます。この『masonry』とよく一緒に組み合わせて使われるのが『imagesloaded』というJava Scriptで、画像を読み込んでから何かを実行するというものです。『imagesloaded』で画像を読み込んでから、『masonry』でタイル状に並べ替えるというわけです」

20140722_arai_tumblr_source
私のTumblrブログを開いて、ソースコードを確認してみましょう
20140722_arai_tumblr_source
ソースコードを表示すると、CSSやJava Scriptでどのようなものが使われているのかがわかります
20140722_arai_tumblr_source 20140722_arai_tumblr_source
ソースコードだけに…… おいしくいただきました

おすすめのTumblr
 ここでは、池澤あやかちゃんおすすめのTumblrブログを紹介します。ぜひ、フォローして、気に入った記事を「リブログ」してください。

イラストレーターのうえむらさんが描く女の子を見ることができるサイトです

寝る子がよく育った。
http://uemulagirls.tumblr.com/

■関連リンク
「池澤あやかのギーク道」公式Facebook
池澤あやかさん公式ブログ
池澤あやかさん公式Twitter

MacPeopleはNewsstandでも配信中
1ヵ月の定期購読なら最新号が600円!

Newsstand 電子雑誌をダウンロード

関連記事

あわせて読みたい

follow us in feedly

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking

BEST BUY

みんなが買っている最新アイテムはこれだ!

Amazon.co.jp