Twiume（ついうめ）っていうツールをリリースした

f:id:stkn_bb:20140907195327p:plain

Webツールをリリースしました。

→Twiume β

ことの発端は

あーツイートにツイート埋め込めれるよねーとか思って

違ったらしい。。

どうやら、ブラウザのTwitterではブログとかサイトにツイートを埋め込むコードを発行できるんだけど、iPhoneアプリのTwitterではそれができないらしい。スマホでブログ書かないから知らなかった

このままでもなんかくやしいなーと思って作ってみた

まずコードがどうやって作られているか調べてみた

<blockquote class="twitter-tweet" lang="ja">
  <p>
    埋め込みツイートがスマホからでも出来る様に(埋め込みコードが表示される様に)してほしい
  </p>
  &mdash; 木村直人【air/LOVEST】 (@air_kimura)
  <a href="https://twitter.com/air_kimura/status/507777653563084800">
    2014, 9月 5
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

上のが取得できるコード。（読みやすく改行してあります）

んで、それぞれの要素を分解してみると

<blockquote class="twitter-tweet" lang="ja">
  <p>
    【ツイート文】
  </p>
  &mdash; 【ユーザー名 】(@【ユーザーID】)
  <a href="【ツイートURL】">
    【ツイート日】
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

【】で囲んであるのがツイートによって変わるところ。あとはおまじない。

じゃーツイートURLとってスクレイピング*1してツイート文とかとってこれば作れるねーと思って

とつぶやいてとりあえず置いておいた

作り始めたら壁ってあるよね

壁。あるある。

まぁエンジニアなんて壁ばっかじゃん。壁くらいあってもまぁなんとかなる

が

が

(iii) Twitterから提供されている当社の現在利用可能な公開インターフェースを経由する（かつ、その使用条件に従う）ことなく、その他の何らかの手段（自動その他を問わず）で本サービスへのアクセスもしくはその検索を行うか、またはアクセスもしくは検索を試みること。ただし、Twitterと別途締結した契約によりこれを行うことが特に認められている場合はこの限りではありません。（注：本サービスのクローリングは、robots.txtファイルの定めによる場合には許されます。ただし、Twitterの事前の承諾なしに本サービスのスクレイピングを行うことは明示的に禁じられています）。

Twitter / Twitter Terms of Service より引用

Twitterスクレイピング禁止してんじゃん！！ｗｗ

さすがにTwitterさんに消されるのもいやだなーと思ってやめようかと思った

けど

な、生意気すぎる。。

ここで諦めたくなさすぎるｗｗ

と思ってTwitterのJSハックしてみた

スクレイピング無しで実現する方法を探す

そもそもJSでどうやってブログに埋め込みツイート表示させるようにしてんのって思って調べてみた。

<blockquote class="twitter-tweet" lang="ja">
  <p>
    【ツイート文】
  </p>
  &mdash; 【ユーザー名 】(@【ユーザーID】)
  <a href="【ツイートURL】">
    【ツイート日】
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

これがさっき出したやつ。

blockquoteのタグって引用っぽく出すHTMLタグじゃん。

これだけでツイートを埋め込んでるわけじゃないだろうなと思って、下の

<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

のところでTwitter独自の表示として上書きしてるんだろうな、と。

ちょっと消してみようぜ

<blockquote class="twitter-tweet" lang="ja">
  <p>
    埋め込みツイートがスマホからでも出来る様に(埋め込みコードが表示される様に)してほしい
  </p>
  &mdash; 木村直人【air/LOVEST】 (@air_kimura) 
  <a href="https://twitter.com/air_kimura/status/507777653563084800">
    2014, 9月 5
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

これを表示させると、

これが出る。

じゃあ本文消してみよっか

<blockquote class="twitter-tweet" lang="ja">
  <p>
    【消したよ】
  </p>
  &mdash; 木村直人【air/LOVEST】 (@air_kimura) 
  <a href="https://twitter.com/air_kimura/status/507777653563084800">
    2014, 9月 5
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

これで表示させても

ほう。変わらない。

じゃあいろいろ消してみよっか

<blockquote class="twitter-tweet" lang="ja">
  <p>
    【消したよ】
  </p>
  &mdash; 【消したよ】 
  <a href="https://twitter.com/air_kimura/status/507777653563084800">
    【消したよ】
  </a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8">
</script>

↓

同じやん。

結果

<blockquote class="twitter-tweet" lang="ja">
  <a href="https://twitter.com/air_kimura/status/507777653563084800"></a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ここまで削減できた。

必要なのURLだけじゃん。blockquoteタグのなかのURLからツイート情報を特定してウィジェット出してるみたい。

※厳密にいうと、ツイート文とか必要です。Twitterのサーバーが止まってデータを取ってこれないときにコードに書かれていたツイート文やらユーザー名が表示されます。あくまで、しょうがない「簡易版」です

んで、つくった

Twiume β

ツイートのリンクをコピペして、フォームに入力するとさっきのやつ

<blockquote class="twitter-tweet" lang="ja">
  <a href="【URLをここに挿入】"></a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

にURLを挿入して返すだけ。楽ちん。

詳しい使い方とかは木村さんがブログ書いてくれたからそっちもどうぞ。

【続々】なんでも言ってみる、やってみるもんだなぁ。 – 木村直人 / KIMURA NAOTO

まとめ

Sinatraを初めてつかった

まず、RubyのSinatraというフレームワークを初めて使いました。

いままでRubyはRuby on Railsだけしか使ったことなかったんだけど、今回そんなに重量級のフレームワークじゃなくてもよくて、超軽量なフレームワークが使いたかった。

で、いままで超軽量のフレームワークとして、PHPのCodeIgniter https://ellislab.com/codeigniter

というzipファイルを解凍するだけで動き始める神フレームワークを使ってたんだけど、PHPあんまり好きじゃなくてRubyで同じくらい軽いのないかなーと。

Sinatraとても使いやすかったので、またそれはそれでブログ書くー

スマホオンリーユーザーを見る

一番大きかったのはここで、木村さんとかってほぼスマホでブログ書いてるみたい。

MacBookAir持ち歩いてて場所さえあればPC開いちゃう俺ではTwitterのスマホアプリでブログ埋め込み用のコードが取得できないとか全く考えられないわけですよ。

iPhoneも大型化するし、もっとスマホのみでしか作業しないみたいな人増えると思うんですよね。まぁ今でも結構多いし。

そこで、その人達にサービスを届ける側としてはPCなんてたぶん触ってちゃダメで、いかにスマホで完結できるサービスを提供するかっていうのはもっと突き詰めて考えていかなきゃいけないなぁと。

例えば、スマホでWebのフォーム入力するのとかもかなりめんどくさいし。。あれってスマホ世代からみたらPC時代の負債だよなぁ

そんな感じ。

Sinatraのフレームワークの勉強と、Twitterのウィジェットのハック、実装、デザイン調整、サーバー構築、テストで累計５時間くらいかなぁ。

フレームワーク等の学習コストとサーバー構築次からしなくていいから同じようなやつだと１〜２時間くらいで作れるんじゃないかなぁ

Webツールつくるの趣味にしようかなーｗ

木村さんのブログ超面白いのでみんな見るといいと思う。このツールが少しでも力になればｗ

木村直人 / KIMURA NAOTO - POOL MAGAZINE

木村直人 | BLOG HOMME

いつも笑わせてもらったり、考えさせてもらったり、前職のSnapeeeでもお世話になってたのでちょっとだけ恩返しできただろうかｗ（きっと本人は知らない）

そんな、ツールリリースでした。

※アメブロだとダメだったみたい。ごめんなさい（アメブロの中のひと、対応してください）

*1:スクレイピング： Webページからプログラムを駆使して欲しいデータを抜き出すこと