読者です 読者をやめる 読者になる 読者になる

ゆーすけべー日記

はてなBlogってどーなの!?

初めてのスペインなう

f:id:kamawada:20150831161803j:plain

成田から途中ヘルシンキを経由してエルプラット空港に到着。実に15時間以上の旅であった。 さすがに疲れているのでタクシーに乗り、宿泊先にチェックイン。 そして、出張時のお決まり「充電ステーション」を組み上げ、落ち着いたのが23時。

f:id:kamawada:20150831134620j:plain

外に出るのもめんどいのでホテルのレストランでハンバーガーを食う。

初めてスペインに来て最初に食べたのがハンバーガー。それもひとり。なるほど。

いつの間にか、だだっ広いベッドの上で寝て起きたら、今日になっていた。

f:id:kamawada:20150831052002j:plain

遅い日の出の時間くらいまでいくつかの「楽しいタスク」を消化。 こちらの朝は向こうの昼間なのでみんなが活動的で都合が良い。 9時くらいから外出開始。 途中朝食休憩を挟んで徒歩30分の距離にある「かのサグラダファミリア」へ向かう。

f:id:kamawada:20150831153157j:plain

このバルセロナの街。アジアンな観光客は少なくひとりで活動していると「現地の人達に混じっている感」がある。

f:id:kamawada:20150831153614j:plain

相手が英語を喋れればまぁラッキーなんだけど、僕も英語がそれほど出来るわけじゃないので、諸々と戸惑うことがある。

めんどくさいことはどこの国に行ってもあるもんだなー。なるほど。

なんてしていると目の前にズドンと現れた「で、で、でけ〜」そうこれがサグラダファミリアである。

f:id:kamawada:20150831161629j:plain

最初から決めていた通り、中には入らず、周りを散策するだけ。しかしこのデカさからくる威圧感はすげーな。

うんで、本場の「カンペール」があるなーとか思いながらもめんどいから通過。 「ホットコーヒーと氷の入ったグラス=アイスコーヒー」を飲みつつ一服。 適当に街中を彷徨って部屋に戻った。

f:id:kamawada:20150831161042j:plain

しかし、話変わって「SIMフリー」というのは便利である。 いや、究極「どこでもなにもしないで使えろよ」と言う話かもしれないがまぁ夢。 これまで「ソフバンアイフォン」一点張りだったのに加え、最近いろいろと試している。 先日は「検証機」名目で「Zenfone 2 laser」を手に入れたのでIIJmioのSIMを差し込んで使っている。 Androidの使い心地も良いし無問題感すごい。

f:id:kamawada:20150901020247j:plain

当然今回もZenfoneを持ってきている。 なので、それ用にLebaraというところのプリペイドSIMを手に入れた。 バルセロナの空港にて「5GB / 35ユーロ」とまずまずのお値段。

f:id:kamawada:20150830213136j:plain

ちなみに海外向けのモバイルWifiルータを借りてきているが、転送てっぺんまで行って使い物にならないが、 Zenfone+Lebaraは生きている。

昼過ぎ。時間的に本場でシエスタでもしようか... とその前に腹が減ってきたので、通りを歩く。どこでも飯が食える場所は見つかるが、清潔そうなところを見つけて、入店。 お、タパスだ。俺が最近まで「言葉の意味」を知らなかった「タパス」があるぞ。

f:id:kamawada:20150831204832j:plain

うめー!けど、いろんなの食べちゃって、太りそうだし、25ユーロとか...えっ!

タパス食べてスペインぽいぞ!って時のBGMにジャックジョンソンかかると萎えるんだな。なるほど。

まぁ、そんなこんなでYAPC::Europe 2015ってのに参加するためにスペインにいます。 めっちゃ観光しているけどスペインにいます。 もう少しで今日の目的「スられない」を達成出来そうなので、最後まで気を抜かないようにしたいです。

20時でも明るいバルセロナからでした〜 バイバイ(^^)/~

A20 地球の歩き方 スペイン 2015~2016

A20 地球の歩き方 スペイン 2015~2016

そのURLが表示される時

Facebookで「URL」付きの投稿をポストした際に以下のような「URLが参照するコンテンツのサマリーを考慮した表示」になるのはご存知だろう。

f:id:kamawada:20150825100629p:plain

こうした「URLの表示」はFacebookのみならず様々なプラットフォームで行われつつあり、混沌としつつも、ウマく活かせば閲覧者にとって便利な機能となる。


僕のメインワークである「ボケて」の開発は、かなり近い将来に大きめのマイルストーンを掲げている。 ただ、リソースの都合上その開発に入る前に、今現在は「コマイ作業」をやっているところだ。 その一環として各種プラットフォームでの「URLの表示」を工夫し、実際にどう見えるのか?、そしてその効果を測るというのを実験的に行っているというわけである。

今回はどのようなプラットフォームでどのような施策をし、どのようにURLが表示されたのか?を紹介する。


Facebook

Facebookの場合はOpen Graph protocol = OGPと呼ばれる約束事をベースに「URL表示」が実装されている。 対象となるURLのHTMLにOGPに従ったMETAタグを記載すれば良い。 例えば、とある僕のお気に入りのボケは以下のように表現される。

<meta property="og:type" content="article" />
<meta property="og:site_name" content="Bokete" />
<meta property="og:title" content="あれ?俺のポカリはどこだ?" />
<meta property="og:url" content="http://bokete.jp/boke/34651020" />
<meta property="og:image" content="http://d2dcan0armyq93.cloudfront.net/photo/odai/600/2c6530d95dc299170b59e35f0bbf6a22_600.jpg" />
<meta property="og:description" content="写真で一言 ボケて(bokete)" />

これをシェアするとFacebookのタイムラインでは以下のように表示される。

f:id:kamawada:20150825103346p:plain

おお〜 ボケては「写真で一言ボケる」ことを趣旨とするWebサービス。 このように多少見きれてしまうが、写真が大きく載り、その下にボケのテキストが大きく掲載されると本家サイトほどでは無いが、それなりに説得力のある表示である。 ちなみに、Facebookオフィシャルのモバイルアプリの場合はこんな感じ。ほぼ同じような具合だ。

f:id:kamawada:20150825103651p:plain

この見せ方はOGPの記述もあるが画像のサイズがキモになってくる。 2015年8月現在、Facebookでは、横幅が600px以上ないと全デバイスで写真が大きく表示されない。 実はボケてで配信している写真は「横幅もしくは縦幅の大きい方を400pxに合わせる」という仕様だったために、対策をする前はこれほどインパクトのある見せ方は出来なかった。 ただ、Retinaディスプレイをはじめ高解像度な画面を搭載した端末が増えているという理由で解像度を上げることを検討していたことも事実。 そこで、思い切って大きな写真を配信するようにしたら中々いい具合である。

実際Facebookからの流入を、対策をしたここ1ヶ月とその前期間で比べて見ると、たまたまシェアされやすいボケが最近生まれたという差はあれど、 Google Analytics上では格段に「増えている」ことが分かる。

f:id:kamawada:20150825105311p:plain

Twitter

TwitterはTwitterでOGPでもない「Twitter Card」なるMETAタグ記述を推奨している。

<meta name="twitter:site" content="@boketejp" />
<meta name="twitter:creator" content="@boketejp" />
<meta name="twitter:description" content="写真で一言 ボケて(bokete)" />
<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content="あれ?俺のポカリはどこだ?" />
<meta name="twitter:url" content="http://bokete.jp/boke/34651020" />
<meta name="twitter:image" content="http://d2dcan0armyq93.cloudfront.net/photo/odai/600/2c6530d95dc299170b59e35f0bbf6a22_600.jpg" />
<meta name="twitter:image:width" content="600" />
<meta name="twitter:image:height" content="598" />

name属性の値がtwitter:cardである要素のcontentphotoにすることで写真をメインとしたコンテンツのURLですよ〜 と定義している。 これが一番見栄えが良かったからだ。TwitterのページもしくはTwitterのオフィシャルクライアントだといい感じに表示される。

f:id:kamawada:20150825110353p:plain

しかし、ページにMETAタグばっか増えてきたな...

Google

表示が重要なのはSNSのみじゃない。スタンダードとなったGoogleでの検索結果の表示もだいぶ工夫してみた。

結果的には以下の点が改善されている。

  • descriptionを見直し表示される概要を整えた
  • PC向けWebとスマホ向けWebとの関係を強化した
  • 検索結果の表示に投稿された日付が表示されるようにした
  • 検索結果の表示にパンくずが表示されるようにした

例えば以下のボケの場合の表示を見てみよう。

って、はてなブログにembedしたらOGP読んでくれてるっぽいやん!!

というのは置いといて... Googleの表示。

f:id:kamawada:20150825111351p:plain

「2015/08/10」と投稿された日付が出てるし、パンくずのおかげでこのURLは「ボケて」の「ボケ」というコンテンツの「バカ」というカテゴリーなんだな、みたいなのがなんとなく分かる。 これらを実装するには主にGoogleが推奨している「構造化データ」にのっとり、今回はMicrodataというスペックを使った。パンくずを構成するol要素の中身はこのような具合だ。

<li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke">
    <span itemprop="name">ボケ</span>
  </a>
  <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke/category/%E3%83%90%E3%82%AB">
    <span itemprop="name">バカ</span>
  </a>
  <meta itemprop="position" content="3" />
</li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="http://bokete.jp/boke/34505325">
    <span itemprop="name">新アトラクション″室伏″の終わり方が心配でたまんない</span></a>
  <meta itemprop="position" content="4" />
</li>

ボケてのサイトは日付の掲載を「XX時間前」とか「XX日前」というような現在からの差分のテキストでのみ行って来た。 今回Googleの検索結果にタイムスタンプを掲載するにあたってまず、個別ページのみ「2015/08/25」形式での記載をする策を打った。 それに加え、構造化データのSchema.orgに従いitemタイプを http://schema.org/Article として投稿された日付をメタ表記。 この2つで日にちの表示が叶ったわけだが、どちらが影響しているのかちょいと不明。

<meta itemprop="datePublished" content="2015-08-10T02:25:18+09:00"/>

以下はモバイルSafariを使ってのiPhone上での表示。ちゃんと「スマホ対応」って文字も出てる。

f:id:kamawada:20150825114512p:plain

正直Googleからの流入はサイト名「ボケて」や「bokete」を入れて来るケースがほとんど、かつ、この施策をしたのが直近なので効果がそこまで分かってない。 ただ、ロングテール的な意味でも、検索結果として分かりやすくするということでも、この対策はアリだったと思っている。

Gunosy

これはあまり一般的では無いが、ボケてではGunosyにコンテンツ提供をしている。 Gunosyへの配信コンテンツ一覧の更新タイミングが1日に1回0時に行われるという仕様だと、どうしても「一気にドバーッと」ボケが更新されるだけで、他の時間帯をカバーしきれない。 なので、適当にロジックを考え、最近面白いボケが1時間に3個前後ほど追加される一覧をつくってGunosyに読んでもらうようにした。 これは昨日やった施策なんだけど、早速「おもしろ」タブにコンスタントにボケてのネタが入ってて良い。


今後の対策

今回色々と実験出来てよかった。 また、iOS9が出るタイミングを待ってから、いわゆる「ディープリンク」と呼ばれるモバイルアプリとの連携を色々と試していきたいね。 あとはまぁー、冒頭で話した「かなり近い将来の大きめのマイルストーン」が実装されたら、もっとコンテンツのファインダビリティ上がるので頑張りたいです!

おしまい。

役だった本

頼られるWeb担当者になる! Googleウェブマスターツールの教科書

頼られるWeb担当者になる! Googleウェブマスターツールの教科書

ありがとう! #yapcasia

YAPC Perl Podcast

8月20日〜22日までの3日間、東京ビックサイトにて開催された「YAPC::Asia Tokyo 2015」に「参加&トーク」してきました。

f:id:kamawada:20150822113000j:plain

昨今のYAPC運営母体である「Japan Perl Association」が主催する「YAPC::Asia」は今回が最後となります。 YAPC::Asiaは今回でちょうど10周年目、会場が東京ビックサイト、そしてラスト。 主催の @lestrrat さんが「大花火を上げるぞ!」と 言っていた通り「ドでかいYAPC」でしたね。@lestrrat さんをはじめ、スタッフの方々、参加者の方々、スピーカーの方々お疲れ様でした!

#yapcasia

僕はYAPC::Asiaには2008年から参加したのですが、 その当時からYAPC::Asia関連について、Twitterでは#yapcasiaのタグをつけてツイート、また、その他Flickr、YouTube、はてブなどでもこのyapcasiaというタグが付けることが推奨されていました。 特にTwitterの検索を駆使すると、YAPC当日にはトークの感想がリアルタイムに流れているのを見ることができ、YAPC終了後には感想ブログ記事を追うことが可能です。

f:id:kamawada:20150824092928p:plain

今現在もものすっごい量のツイートがバンバン上がってるので、熱量感じますねぇ〜 普段からオンラインのツールに強い属性の人たちが参加するオフラインのミーティングってことでTwittr etcも含めて楽しめるってのがなんつーかYAPC::Asiaの特徴かと思いました。

ちなみに

yapcasia OR "yapc lang:ja"

を僕はTwitterクライントの検索窓に入れてずっとツイートを追ってます。

さらに今年はtogetterさんがスポンサーだったのでこうしたツイートをトークセッションごとにリアルタイムにまとめてくれて、発表が終わったらもう「まとめ」が出来てる状態になってて めっちゃいいな、って思いました。

Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN

f:id:kamawada:20150821152202j:plain

僕は21日YAPC本編1日目に60分の枠で「Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN」という題名でトークさせていただきました。

yapcasia.org

60分という尺の発表は初めてなのですが準備していくと

  • 言えることは以外と少ない
  • とはいえ時間が長めなので疲れる

ということが発覚。「エンジニアでもコンテンツ発信したいよね!」ってことに関してもっと話したかったところをシュリンクさせて「Podcast」に照準を絞って話させてもらいました。

上記した通りtoggeterでもまとめてもらってます。

togetter.com

「Podcast」とニッチなテーマになりましたが、実際やッてみたい!と思ってくれる方が意外や多くて良かったです。

  • PodCast を始めるためのツール、意外を自分には揃ってるじゃないか!

というコトに気がつけたのが良かったです。

『ニート』だけど YAPC::Asia Tokyo 2015 に参加してきました! - カラクリサイクル

あ、あと、ひたすら僕が使っている機材を生々しく販売価格付きで紹介するコーナーがあったのですが、それによって「Podcastお金かかるんじゃないの...」という印象を持たれちゃったかもで、反省してるのですが、最小限でやればOKだと思います。例えばの構成ですが

  • ドメインは最初取らないでfeedburner使う=0円
  • サイトは既に持っているVPS or Blogツールを使う=0円
  • マイクはお手頃なUSBマイクを使う=1万円前後

なんてーのがオススメです。USBマイクは予算に合わせて適当に... 発表内でも話したとおりいわゆる「静かな場所」で録音すればなんとかなります! ちなみに、僕が持ってる毎回「手荷物検査場」で止められるマイクはコチラです。飛行機に手荷物で持ち込まなければオススメですねw

YAPCあるある

所属している(株)オモロキでスポンサーしているってことで、いつの間にか、鎌団子さんとこんなトークセッションをやることになりました。 過去の実行委員長もしくはメインオーガナイザーを呼んで、YAPC::Asia10周年を振り返るというコーナーです。出演者は僕ら2人に加えて、

  • @miyagawa
  • @takesako
  • @941
  • @lesstrat

と合計6人。豪華メンバーになりました。

f:id:kamawada:20150822144453j:plain

トークセッション、もしくはメンバーの性質上「時間配分」がちょうどよくいくか?が心配だったのですが、皆さんさすが。 ピッタリ本編のトークが終わり、予定通りの質疑応答時間を確保し、皆さんいいバランスで喋ってもらいました。 僕自身も楽しかったです。

togetter.com

トークを聴くのは素人?

YAPCあるあるのセッションで @941 さんが

YAPCでトークを聴くのは素人ですよ

みたいな発言しててウケた。 玄人か素人か?は置いといて、確かにまじめに毎回トークセッションの話を聴く必要はないよねぇ、とは思うし、僕自身自分が話す立場だったので、体力温存or体力消耗のためにあんまトークは聴いてない...

とはいえ懇親会も含めて色んな人と話してすっげー刺激になりました。 ゲストで来ていた、現在goの開発者であり、昔はGearmanなど数々のイケてるプロダクトをつくっているbradfitzとサシで話したのも楽しかった。

俺「こういうプロダクトでGearman使ってるぜー」

bradfitz「Gearman速いだろー」

俺「Gearman好きだから、君にありがとうって言いたかったんだぜ」

bradfitz「ところで俺は最近Perl書いてないぜ、goだぜ」

俺「goのいいところを教えてくれ」

...

また、goに限らず、ベストトーク賞2位、3位で話題を独占していた「HTTP/2」や「Electron」とかとか気になる技術が出てきてワクワクします。

ありがとう!

このように楽しかったYAPC::Asia Tokyo 2015が終わり、来年には「本当にYAPCは無いのー?」って心情かもしれませんが、とりあえず「YAPC::Asia」という存在にありがとうと言いたいです。 2008年に初参加していきなりLT発表したら @yappo さんに「いい発表だけど、笑いどころないよね」ってマジレスされたこと。 悔しいので「miyagawanize」というスペシャルなネタのLTを英語でトークしたら爆笑ゲット出来たこと。 たぶん歴代最高、2回もベストトーク賞を取れたこと。 1回のみになっちゃったけど実行委員長を経験出来たこと。そして何より、色々な人と出会えたこと。 とにかくこのYAPC::Asia Tokyoのおかげで成長出来ました。本当にありがとう!!

f:id:kamawada:20150822182028j:plain

はてなブログに「ゆーすけべー日記」移転です

以前はTumblrで運用していた僕のメインBlog「ゆーすけべー日記」をはてなブログへたった今移転しました。

f:id:kamawada:20150823151138p:plain

キッカケは昨日まで行われていた「YAPC::Asia Tokyo 2015」です。

はてなブログは以前から気になっていて、ここ1年くらいで使いやすくなった印象です。 試しに、実験的なメディア「ブツヨクプレス」っていう趣味サイトを「はてなブログで」立ち上げたのですが、 案の定サクサクと記事を書くの楽しいです。

と、はてなブログの評価をしているタイミングで「YAPC::Asia Tokyo 2015」が行われました。 前夜祭では「はてなの中の人」でもある @y_uuk1 君が、まさに「Blogを書くこと」をテーマにしてトークしてて、非常に感銘を受け

Blog記事書いてくのってやっぱいいよね

って思ったのです。

f:id:kamawada:20150820201259j:plain

そんで、次の日YAPC1日目にも、同じく「中の人」である @mohri さんとお話して、

@mohri「あ、はてな10周年ステッカーあげます」

俺「ありがとうございます!実は、はてなブログ、最近またちょっと触ったんですが、使いやすいですね!」

@mohri「どんどん使って下さいよ〜」

俺「ゆーすけべー日記も移そっかな〜って思ってますよ」

@mohri 「是非是非!」

と同調したのであります。このようにYAPC、もしくはそれ以前に試したおかげで

  • Blogエントリー書いてこ!
  • それには使いやすいBlogツール欲しいわー
  • 中の人に推されたし、ってか客観的にも、はてなブログ良さげ

こうしたキッカケを得ることが出来たわけです。

では、はてなブログのいいなって思った点をいくつかピックアップしてみます。

  • Markdownで書ける上に embed の類が便利に出来る
  • そして embed で貼り付けられる種類が豊富
  • なのでわざわざ別のデスクトップアプリとかで下書きなどせずWebブラウザのフォームにいきなり書ける
  • いわゆる「スーパーpre」なシンタックスハイライトをしてくれるからコードを貼るって見せるのに充実している
  • 写真の貼付けが楽だし、表示する時には自動で最適なサイズで出してくれる
  • 上記の件はTumblrも同じだったんだけど、最近はMarkdown記法で書く時に画像アップロード出来ないっぽい?からめんどい
  • テーマはまだ少ないがクールなのもいくつかある
  • はてなのサービスなんではてなブックマークとかと親和性が高いかも?

ちなみに、Tumblrで運用していたエントリーのみならず、yusukebe.com というドメインで運用していたMovableTypeのコンテンツもこちらへ持ってきました。 こんな移行工程でした。

  1. はてなブログ開設
  2. yusuke.beのサブドメインblog.yusuke.beをCNAMEではてなブログへ向ける
  3. Tumblrから直接はてなブログへは移行出来ないので一度、Tumblrから一度「WordPress.com」へ移行
  4. WordPress.comからエクスポートしたデータをはてなブログにインポート
  5. MovableTypeで運用していた yusukebe.com のデータをエクスポート
  6. 後述するスクリプトでエクスポートされたテキストを変換
  7. はてなブログへインポート
  8. 記事が揃ったのでデザインやら文言など微調整

1点問題だったのは、はてなブログのPermalink URLです。僕はデフォルトの

http://blog.yusuke.be/entry/YYYY/MM/DD/HHMMSS

形式にしているので、インポートするエントリーもそれに合わせたかった(旧Permalink URLからのリダイレクト処理などはめんどいのであんま考えずに...Googleさんがなんとかしてくれるはず...)

ってことで以下のようなすっげー適当なPerlスクリプトを書いて「BASENAME」を変更することで揃えることに成功しました。

use strict;
use warnings;
use Path::Tiny;
use DateTime;
use DateTime::Format::Strptime;
use DateTime::Duration;

my $dt_parser = DateTime::Format::Strptime->new(
    pattern => '%m/%d/%Y %r',
);
my $duration = DateTime::Duration->new( hours => 9 );

my $path = path($ARGV[0] || 'yusukebe.com.txt');
my $text = $path->slurp_utf8;
my @metas = $text =~ m!--------\n(.+?)-----\nBODY!mgs;
for my $meta (@metas) {
    my ($original_basename) = $meta =~ m!BASENAME: (.+)\n!;
    my ($date) = $meta =~ m!DATE:\s+(.+)\n!;
    my $dt = $dt_parser->parse_datetime($date);
    $dt = $dt - $duration;
    my $new_basename = sprintf(
        "%04d/%02d/%02d/%06d",
        $dt->year,
        $dt->month,
        $dt->day,
        $dt->hms('')
    );
    $text =~ s!BASENAME: $original_basename!BASENAME: $new_basename!;
}

my $new_path = path('output.txt');
$new_path->spew_utf8($text);

Path::Tinyサイコー!

さて

Blogを書くまでがYAPC::Asia!

です。よーし、これでやっとYAPCのBlog記事書けるぞい!ってことで今後ともゆーすけべー日記をよろしくお願いします。

YAPC::Asia Tokyo 2015 で「Podcastのつくり方と楽しさ」について話します

いよいよ今週「木金土」8月20日〜22日に迫ったYAPC::Asia Tokyo 2015。 参加者の皆さんチケットの準備はいかがですか!スピーカーの皆さん発表の準備はいかがですか! 僕もスピーカーとして発表させてもらいますが、ただいま誠心誠意スライド作成中でございます。

スライド

タイトルは「 Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN 」といいます。本トークの時間と会場は

8月21日(金) 15時30分から60分間 @トラックE (607-608)

です!YAPCにお越しの方は聴きに来てください!内容はRebuildや、僕(達)がやっているだんごゆっけの平和な話wada.fmなど「今話題の!?」 Podcastがテーマ です 。自らが配信している経験を活かして Podcastをどのようにつくって、それにはどんな楽しさがあるのか? をご紹介します。

Podcating

今回Podcastをつくるための要素を以下の3つにまとめました。それぞれ「最低限でやるためには?」ってことと「今自分はこうやっている」を解説していきます。

  1. 配信する的な意味での システム編
  2. ネタ的な意味で コンテンツ編
  3. 音的な意味で 収録加工編

また、Podcastのように枯れた技術を使い、プラットフォームに依存しない「 IndieなWeb 」という概念にも触れたいと思います。このトークを聴いて

  • Podcastって楽しそう!
  • Podcastを「自分なりに」配信する方法が分かったぜ!
  • Podcastに限らず自分でメディアをつくるのってやっぱ楽しいね!

という気分になって高揚していただけると幸いですし、そんな時間と場所をつくろうと努力いたします!! 重要なのでもう一度。僕のYAPC::Asia Tokyo 2015 のトーク「 Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN 」は

8月21日(金) 15時30分から60分間 @トラックE (607-608)

で行われます。皆様、ご来場のほどよろしくお願いします。楽しみましょう!

Indie Web という言葉

過去にPodcast「Rebuild」へ出演したことがあるってことで、当のmiyagawaさんから「Rebuild Meetup 2015」のお誘いが来た。YAPC::Asiaの直前なんで〜とか言いながらたぶん行く。自分もRebuildに影響されてPodcastを始めた手前、リアルイベントとの融合的なチャレンジは何より興味がある。

そういえば、miyagawaさん、TAKESAKOさんと3人で 2014年の「通称デブサミ」にて「Webの現在過去未来」というセッション で色々と「ダベった」のを思い出す。当初、主催である翔泳社のとある方からお声掛けしてもらって、実はこのセッション、会期2日目のキーノート的な立ち位置だったんでビビったw で、僕が

Webの技術的なことも面白いけど、それを利用する環境として、モバイルアプリとか出てきてプラットフォーム化している現象が興味深いよね。以前はBlogのムーブメントもあったけど、今後どうなるんだろうね〜 そう、Webの過去、現在、未来を考えたい!

と「ぼんやりとした」ことを言ったらその方がノッてくれた。ただ、僕だけじゃ心もとないってことで、対談っぽくしよう、となりこれまたビビリながらも「Rebuildやってるmiyagawaさん!」とお願いしたらなんとか一緒に出演してもらい、強力なサポーターとしてTAKESAKOさんがモデレートしてくれることになった、という経緯。

デブサミ2014

実際のセッションでは、正直「未来」のことはあんまり話せなかったんだけど、面白い言葉が生まれた。と言っても確かmiyagawaさんが言ったんだけどね。それが「 Indie Web 」。AppleやGoogleにショバ代払うプラットフォーム「サービス」が登場している中、なにげにRebuildを始めとした「技術系Podcast」も増えている。Podcastはご存知の方は説明が要らないだろうが、最低限、公開出来るグローバルなIPやドメインと「Media RSS」で拡張されたフィード、そして、mp3などの音源ファイルを配信しさえすれば、全世界に自らの番組を公開出来る。AppleのiTunes StoreのPodcastディレクトリに登録しり、ランドマークとなるWebサイトを持っていた方がいいかもしれないが、とにかく「枯れた技術」で出来ちゃう。「自分ひとりで」出来ちゃう。うん、「 Indieな Web」っぽい。

Podcasting

デブサミの少し前。 「WebSig1日学校 2013」というイベントで先生をやらせてもらったことがあって 、その時に話したことのひとつにURIの件がある。Webという技術は上記のモバイルアプリやPodcastにも使われていて、それがIndie Webっぽかったり、プラットフォームな今風だったりと様々に活用されている。URIはWeb技術のひとつ、お約束ごとで、単一のリソースを表すことが望ましいとされている。まさにIndie Webな Blog に関して言えば Permalinkを重視する 点がそれを表している。

ところが、ちょっと考えてみたかったのは、

あなたの facebook.com は僕が見ている facebook.com とは「かなり」違う

ということだ。そりゃSNSサービスのトップページだからその通りだろ!って感じではあるし、Facebookは個別の投稿にPermalinkをしっかりと用意している。ただ、若干の違和感をそこで感じたものだから、URIというスペックがサービスによって「有効に使われているけれども、同一 リソース と呼ばれる リソース が拡大的に解釈される」こともありうるのかー、って思ったものだった。まぁ、なんかこのあたりは僕の勉強不足で議論があるかもしれない。が、枯れた技術や仕様が時流の性質によって、当初とは違う使われ方をすることはあるのかもね。

似たような話で、最近Instagramが楽しくてやたら投稿してまくってるんだけど、あの写真を強制的に「 スクエア 」の比率にしちゃうのは興味深い。スマホで見ること前提でそれに最適化させるという意味では正方形の写真は見やすいという判断なのかと思うと、なるほど感。TOLOTというフォトブックサービスを使った時もびっくりした。自分の写真をピックアップして一冊の小さな写真集をつくって、リアル本となって送られてくる仕組みなんだが、そのフォトブックの仕様が文庫本や新書のようなサイズ感。というか比率。つまり縦型なのである。スマホで縦撮りが増えたから、それにキッチリハマるように。とのことっぽく、逆に普通のデジカメで横撮りした写真は余白が出る。なるほど。

Instagram

大きく脱線したが、枯れたWebの技術を愚直に使い、ひとりでもメディアを立ち上げるというIndie Webの楽しさはおそらく今も存在する。その一方で上記のようなメディアやサービスの変遷、特にスマホの普及で、Webのテクノロジーを使いつつも変わっていく表現がある。そんなことを考えながら、今度こその「未来の妄想」も含めて、自分なりにまとめていこうと思う。

ってことで、ついに再来週に迫ったYAPC::Asia 2015でその辺りを話します!ついでにガチなPodcast配信のイロハも含め!場所は東京ビックサイト!21日(金)15時30分から「トラックE」にて60分のトークです。題名はズバリ Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN となります。チケットを持っている皆さん、ぜひ、お越しください。また、Podcast、 wada.fm でもその辺りを話そうと思うのでよろしく。という長い宣伝でした (・ω<)

Podcastを支える技術、エンジニアのためのWebメディア、そしてCPAN