• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
メディア芸術基礎 II TumblrでWebサイトを作成
 

メディア芸術基礎 II TumblrでWebサイトを作成

on

  • 2,922 views

 

Statistics

Views

Total Views
2,922
Views on SlideShare
2,428
Embed Views
494

Actions

Likes
7
Downloads
20
Comments
0

5 Embeds 494

http://yoppa.org 462
http://cloud.feedly.com 27
http://digg.com 2
http://getpocket.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    メディア芸術基礎 II TumblrでWebサイトを作成 メディア芸術基礎 II TumblrでWebサイトを作成 Presentation Transcript

    • メディア芸術基礎 II Tumblrで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: ‣ ユーザー登録 ‣ まず登録するのは以下の3項目のみ ‣ 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テンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text}
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ
    • Tumblrテンプレートの構造 html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ブログのタイトルを表示 検索結果を表示 様々なタイプの投稿を表示 テキスト 写真 引用 ビデオ 音
    • Tumblrテンプレートの構造 html head 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を追加 ‣ ページにデザインが付加された!!