メディア芸術基礎 IITumblrでWebサイトを作成2013年9月30日、10月7日多摩美術大学情報デザイン学科メディア芸術コース担当：田所淳

今日の内容‣ Tumblrのサービスを使用してWebサイトの公開に挑戦!‣ http://www.tumblr.com

Tumblrとは?‣ (ミニ)ブログと、ソーシャルブックマークを統合‣ 2007年3月1日にサービス開始‣ CEO、David Karp (27歳!)

Tumblrとは?‣ 利用状況 (2013年9月現在)‣ 138,900,000 のブログ‣ 62,400,000,000 の投稿‣ 参考：http://www.tumblr.com/about

Tumblrにアカウントを作成する

Tumblrにアカウントを作成する‣ まずは、アカウントを作成‣ 既にアカウントを取得している方は、既存アカウントを活用

Tumblrにアカウントを作成する‣ Step 1：‣ Tumblrのサイトにアクセス http://www.tumblr.com‣ 右上にある「Sign up」ボタンをクリック

Tumblrにアカウントを作成する‣ 登録は、emailとpasswordとusername を入力するだけ!

Tumblrにアカウントを作成する‣ 年齢確認に正直に答えましょう

Tumblrにアカウントを作成する‣ 表示される、判読しずらい文字を入力‣ コンピュータによる大量のアカウント取得を防止している

Tumblrにアカウントを作成する‣ 登録したemail宛てに確認のメールが届くので認証

Tumblrにアカウントを作成する‣ Step 2：‣ ユーザー登録

‣ まず登録するのは以下の３項目のみ‣ emailアドレス‣ パスワード‣ ユーザ名

‣ 年齢を入力、利用規約を読んだことにして「次へ」

Tumblrにアカウントを作成する‣ 登録が完了すると、登録したemailアドレスに確認のメールが送られてくるはず

‣ 「メールアドレスを認証する」を選択しアカウントを確定

Tumblrにアカウントを作成する‣ ログイン完了、スタートアップ画面が表示される

Tumblrにアカウントを作成する‣ 画面の指示に従って、諸々設定

‣ 1. 自分のポートレートを投稿‣ 2. 自分のブログ用のテーマとタイトルを選択‣ 4. アバターを変更する

‣ 順番にこなしていきましょう!

Tumblrにアカウントを作成する‣ タイトルやブログの説明は、テーマのカスタマイズ画面で‣ テーマ選択もここから

Tumblrにアカウントを作成する‣ 設定画面で、サムネイル画像や、URLを設定する

Tumblrを使ってみる

Tumblrを使ってみる‣ Tumblrでは、様々な種類のメディアを投稿できる‣ テキスト、画像、引用、リンク、チャット、音声、動画

Tumblrを使ってみる‣ 投稿するメディアを選択し、実際に投稿してみる

Tumblrを使ってみる‣ 「保存・公開」すると、ダッシュボードに追加される

Tumblrを使ってみる‣ ダッシュボード右上「(ブログ名) を開く」ボタンを押してみる

Tumblrを使ってみる‣ 設定したテーマで投稿が表示される‣ → このページが公開されたブログに相当する

Tumblrを使ってみる‣ ブックマークレットを設定すると、投稿が楽になる‣ http://www.tumblr.com/goodies 　‣ このページにある「Tumblrで共有」のリンクをドラッグして、ブックマークバーに追加する

Tumblrを使ってみる‣ 投稿したい情報のあるサイトへ移動して、登録したブックマークレットを押す

‣ 別ウィンドウで投稿画面が表示される

Tumblrを使ってみる‣ 実習：‣ 作成したTumblrに、様々なメディアを投稿してみる‣ ある程度投稿が溜まったら、テーマを選択して好みのデザインにしてみる

‣ 余裕があれば、テーマをカスタマイズ

‣ 作成したブログのURLを下記にメールしてください‣ tadokoro+geidai@gmail.com

参考：Tumblrの有名サイト

参考：Tumblrの有名サイト‣ Barack Obama (http://barackobama.tumblr.com/)

参考：Tumblrの有名サイト‣ Lady Gaga (http://amenfashion.tumblr.com/)

参考：Tumblrの有名サイト‣ VOGUE (http://vogue.tumblr.com/)

参考：Tumblrの有名サイト‣ GQ Magazine (http://gq.tumblr.com/)

参考：Tumblrの有名サイト‣ GICCI (http://gucci.tumblr.com/)

参考：Tumblrの有名サイト‣ STUDIO VOICE (http://studiovoice.tumblr.com/)

参考：Tumblrの有名サイト‣ ART iT Japan (http://art-it.tumblr.com/)

参考：Tumblrの有名サイト‣ 水野美紀 (http://mikimizuno.com/)‣

既存のテーマをカスタマイズする

既存のテーマをカスタマイズする‣ まず今回は、比較的簡単な方法で‣ 既存のテーマベースにをカスタマイズしていく

既存のテーマをカスタマイズする‣ もし自分のメインのTumblrブログがあって、そちらの設定は変えたくない場合は、別のブログを作成しておく

既存のテーマをカスタマイズする‣ 追加したブログは、右上のリストにどんどん追加されていく

既存のテーマをカスタマイズする‣ テーマの効果を試すため、あらかじめいくつか投稿する‣ 画像、動画、テキスト、リンクなど様々な種類で

既存のテーマをカスタマイズする‣ まずは、テーマを選択する‣ Dashboardでカスタマイズするブログを選び、Customize themeを選択

既存のテーマをカスタマイズする‣ テーマは、Theme Gardenからカテゴリーごとにブラウズしていくことも可能 (http://www.tumblr.com/themes/)

既存のテーマをカスタマイズする‣ 今回は、Effector Theme というテーマを題材にしてカスタマイズしてみます

‣ 下記のリンクからインストール‣ http://www.tumblr.com/theme/17403

既存のテーマをカスタマイズする‣ シンプルな2カラムのデザインのブログへ

既存のテーマをカスタマイズする‣ まずは、基本機能をカスタマイズしてみる

‣ テキストの色、フォント‣ 背景、バナー、サイドバーなどの画像‣ ロゴ‣ 余白‣ 外部サービス(Facebookなど)

既存のテーマをカスタマイズする‣ 自分なりに、様々なカスタマイズをしてみる

既存のテーマをカスタマイズする‣ 外部Webサービスへのリンク‣ カスタマイズ画面の末尾近くには、外部へのWebサービスの連携機能

‣ 自分が登録しているサービスがあれば、どんどんリンクを貼ってみる

既存のテーマをカスタマイズする‣ 連携した外部サービスへのリンクは、サイドバーに表示される

コメント機能を追加

コメント機能を追加‣ Effector Themeは、Disqusというサービスを利用してコメント欄を追加できるようになっている

‣ Disqus：‣ Webサイトやブログにコメント機能を提供するサービス‣ Wired magazine、Engadget、CNN、Fox News Channel、デイリー・テレグラフ などの大手サイトで採用されている

コメント機能を追加‣ Disqusのアカウントを作成‣ Disqusのサイトにアクセスして、Sign Up ボタンを押す‣ http://disqus.com/

コメント機能を追加‣ Site URLには、TumblrのURLを記入‣ あわせて、Disqusのユーザの登録も(下の欄)

コメント機能を追加‣ Disqusにログインした状態 - 管理画面

コメント機能を追加‣ 生成された、site shortnameとusernameを先程のTumblrのテーマカスタマイズの画面に記入する

コメント機能を追加‣ すると、投稿ごとにコメント欄が生成されている!!

さらに高度なカスタマイズへHTMLを編集

さらに高度なカスタマイズへ - HTMLを編集‣ テーマを選択して設定をいじるだけでは物足りないという方へ‣ よりきめ細かなカスタマイズも可能‣ HTML、CSSをスクラッチから作成

さらに高度なカスタマイズへ - HTMLを編集‣ テーマのカスタマイズ画面の Edit HTML ボタンを押す

さらに高度なカスタマイズへ - HTMLを編集‣ HTMLのソースが表示される

さらに高度なカスタマイズへ - HTMLを編集‣ ここで、HTMLを完全にオリジナルに自作可能‣ さらにCSSも添付されているので、これを変更することも

‣ HTMLのソース内で、{....} という記号で囲まれている部分‣ Tumblrのオリジナルの機能を使用している

‣ 詳細な機能はTumblrのページのドキュメントを参照‣ http://www.tumblr.com/docs/ja/custom_themes+

TumblrのカスタムHTMLテーマの作成

TumblrのカスタムHTMLテーマの作成‣ Tumblrのテーマを完全にまっさらな状態から作ることも可能‣ 最も詳しいドキュメントは、Tumblrのサイトにある資料‣ http://www.tumblr.com/docs/ja/custom_themes+

TumblrのカスタムHTMLテーマの作成‣ カスタマイズの画面を表示するには?‣ Dashboardで、カスタマイズするブログを選択し、Customize Themeボタンを押す

TumblrのカスタムHTMLテーマの作成‣ 表示されるカスタマイズ画面の左コラムのサムネイル直下にある、Edit HTMLボタンを押す

TumblrのカスタムHTMLテーマの作成‣ ここに表示されるHTML(と内包されるCSS)を編集していく

ThumblrのカスタムHTMLテーマの作成‣ カスタムHTMLの確認用に、全ての種類の投稿をテスト用ブログにしておく

‣ Text, Photo, Quote, Link, Chat, Audio, Video

VariableとBlock

Variable(変数)とBlock(ブロック)‣ カスタムHTML作成で重要となるTumblr専用の2つの演算子‣ HTMLの中に埋め込んで使用する

‣ Variable (変数)‣ タイトルや記述など、特定のデータを挿入する

‣ Block　‣ データの集まりを挿入する‣ インデックスページ、個別の記事、ナビゲーションなど

{《Variable名》}

{block:《Block名》} ... {/block:《Block名》}

<h1>{Title}</h1><h2>{PostTitle}</h2><p>{Description}</p>

VariableとBlock‣ Variableの記述例

{block:Posts} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo}{/block:Posts}

VariableとBlock‣ Blockの記述例

Tumblrテンプレートの構造

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示テキスト

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示テキスト

写真

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示テキスト

写真

引用

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示テキスト

写真

引用

ビデオ

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示テキスト

写真

引用

ビデオ

音

Tumblrテンプレートの構造htmlhead

body{Title}

{block:SearchPage}

{block:Posts}

{block:Pagination}

{block:Photo}

{block:Quote}

{block:Video}

{block:Audio}

{block:Text}

ブログのタイトルを表示検索結果を表示

様々なタイプの投稿を表示

ページ送り機能

テキスト

写真

引用

ビデオ

音

ミニマムなHTMLの作成‣ まず、カスタムHTMLの実験としてミニマムなHTMLを作成してみます

‣ ミニマムなHTMLから徐々に本格的なテーマへと発展させていきたい

‣ まずは、Tumblrのタイトルと説明を表示してみましょう!

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body></html>

ミニマムなHTMLの作成‣ Tumblrのタイトルと説明を表示

ミニマムなHTMLの作成‣ タイトルと説明が表示される!

ミニマムなHTMLの作成‣ 次に投稿を表示しましょう‣ 投稿画面は、Postsブロックの中に、種類に応じてポストのブロックを配置していく

‣ まずは、Photo(写真)の投稿で実験

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> </div> {/block:Photo} {/block:Posts} </div> </body></html>

ミニマムなHTMLの作成‣ Photo(写真)の投稿を表示

ミニマムなHTMLの作成‣ 写真の投稿が表示された!!

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </div> {/block:Photo} {/block:Posts} </div> </body></html>

ミニマムなHTMLの作成‣ さらに写真のキャプションも表示してみる

ミニマムなHTMLの作成‣ 写真のキャプションも表示

ミニマムなHTMLの作成‣ この要領で全ての投稿のタイプを網羅していく‣ Text‣ Photo‣ Quote‣ Link‣ Chat‣ Video‣ Audio

‣ ちょっと長いので、下記のURLからダウンロード

‣http://goo.gl/oe0jG

<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts}

{block:Text} <li class="post text"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} {Body} </li> {/block:Text} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

ミニマムなHTMLの作成‣ 全ての投稿タイプを網羅したHTML

{block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo} {block:Photoset} <li class="post photoset"> {Photoset-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photoset} {block:Quote} <li class="post quote"> "{Quote}" {block:Source} <div class="source">{Source}</div> {/block:Source} </li> {/block:Quote}

ミニマムなHTMLの作成‣ 全ての投稿タイプを網羅したHTML

{block:Link} <li class="post link"> <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} <div class="description">{Description}</div> {/block:Description} </li> {/block:Link} {block:Chat} <li class="post chat"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li>

ミニマムなHTMLの作成‣ 全ての投稿タイプを網羅したHTML

{/block:Lines} </ul> </li> {/block:Chat} {block:Video} <li class="post video"> {Video-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Video} {block:Audio} <li class="post audio"> {AudioPlayerBlack} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Audio} {/block:Posts}

ミニマムなHTMLの作成‣ 全ての投稿タイプを網羅したHTML

</div> </body></html>

ミニマムなHTMLの作成‣ さらに写真のキャプションも表示してみる

ミニマムなHTMLの作成‣ 実際にページを開いてみて、投稿した全てタイプが表示されていることを確認

CSSを追加

CSSを追加‣ CSSは、HTMLファイルのhead要素内に直接追加する‣ style要素で囲んで、その中にCSSを記述する

‣ 簡単なサンプルで解説します

html { background-color:#eeeeee;}body { background-color:#ffffff; width:720px; margin:0 auto; padding:2em 4em; border-top:6px solid #3399cc; color:#444444; font-family:sans-serif;}.post { padding:1em; border-bottom:1px dotted #cccccc;}a { color:#666666; text-decoration:underline;}h1, h2, h3, h4, h5, h6,h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#3399cc; text-decoration:none;}

CSSを追加‣ head要素内にCSSを追加したスタイルの例

CSSを追加‣ ページにデザインが付加された!!