Hatena::ブログ(Diary)

C++でゲームプログラミング

2014-07-17

[][]AngularJS と組み合わせてツイートする内容を動的に変更するツイートボタンをつくる

さて、サイト内にツイートボタンを埋め込みたい場合は公式のジェネレータを使用するのが簡単です。

しかし、ここで生成したコードではページを開いたあと(ツイートボタンを表示したあと)にツイート内容を変更することができません。

そこでツイートボタンを自前で生成して、動的にツイートする内容を変更できるようなコードを書いてみました。


[ソース]

<html ng-app='MyApp'>
  <head>
    <title>
      test
    </title>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js' type='text/javascript'></script>
    <link href='http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' rel='stylesheet'>
    <script language='javascript'>
      angular.module("MyApp", ["ui.bootstrap"]);
    </script>
  </head>
  <body>
    <style>
      /* base css: https://dev.twitter.com/docs/tfw/embed-code-css */
      button.my-twitter-share-button{
        display: inline-block;
        padding: 1px 3px 0 19px;
       
        border: #ccc solid 1px;
        border-radius: 3px;
        background: #f8f8f8 url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat;
        background: url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat,
                    -webkit-linear-gradient(#fff, #dedede);
        background: url(//twitter.com/favicons/favicon.ico) 2px 3px no-repeat,
                    linear-gradient(#fff, #dedede);
        background-size: 16px 13px, auto auto;
       
        /* Text */
        font: bold 11px/17px Helvetica, Arial, sans-serif;
        text-decoration: none;
        color: #333;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
       
        white-space: nowrap;
      }
       
      /* Colour Highlight for keyboard navigation */
      button.my-twitter-share-button:focus {
        outline: none;
        border-color: #0089cb;
      }
    </style>
    <script>
      var TweetButtonCtrl = function ($scope) {
        $scope.text = "ほむほむ";
        $scope.open_tweet_window = function (){
          window.open('https://twitter.com/share?text=' + encodeURIComponent($scope.text),'','scrollbars=yes,width=500,height=300,');
        }
      }
    </script>
    <div class='container'>
      <br>
      <div ng-controller='TweetButtonCtrl'>
        <pre>{{ text }}</pre>
        <br>
        <div class='input-group'>
          <input class='form-control' ng-model='text' type='text'>
        </div>
        <br>
        <button class='my-twitter-share-button' ng-click='open_tweet_window()'>ツイート</button>
      </div>
    </div>
  </body>
</html>

[デモサイト]


ツイートするページは https://twitter.com/share にツイートするテキストなどを渡して開きます。

今回はデータバインディングの部分で楽をするために AngularJS を使用していますが、別に AngularJS を使わなくても実装はできると思います。

そんな感じでツイートする内容を動的に変更したいと思って色々と試していたんですが思ったよりも大変でした。

もっと楽に実装する方法とかないのかなぁ。

ちなみにテキストが変更される度にツイートボタンを削除・生成するというコードも書いてみましたが、こっちはかなり重い+チラツキが激しいので実用性はなさそうでした。


[参照]

https://dev.twitter.com/docs/tfw/embed-code-css

2014-07-10

[][]HTML から Slim に変換する

HTML から Slim に変換したい場合は html2slim が利用できます。


[インストール]

$ gem install html2slim
$ html2slim --version
html2slim 0.1.0

[使い方]

$ html2slim index.html index.slim

[index.html]

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body class="test">
    <div class="container">
      <h1>
        Hello, Slim world.
      </h1>
    </div>
  </body>
</html>

[index.slim]

doctype html
html
  head
    title
      | Test
  body.test
    .container
      h1
        |  Hello, Slim world. 

上記の場合は、index.html Slim に変換して、index.slim に出力します。

html2haml みたいに結果をファイルじゃなくて、コンソールに出力したいんだけど、そういうことってできないのかな。

2014-07-07

[][]HTML を生成するテンプレートエンジンの Slim を使ってみた

いま、HTML を書くときは Haml を使用して生成しているんですが、同様のテンプレートエンジンに Slim というのがあるので試してみました。


[インストール]

$ gem install slim
$ slimrb --version
Slim 2.0.3

Slim の実行コマンドは slim ではなくて slimrb なので注意。


[index.slim]

doctype html
html
  head
    title Test Slim
  body
    .container
      h1 Hello, Slim world.

基本的な書き方は Haml に似ています。


[HTML を生成]

$ slimrb -p index.slim
<!DOCTYPE html>
<html>
  <head>
    <title>Test Slim</title>
  </head>
  <body>
    <div class="container">
      <h1>
        Hello, Slim world.
      </h1>
    </div>
  </body>
</html>

こんな感じで HTML が出力されます。

HTML をファイルに出力したい場合は、

$ slimrb -p index.slim > index.html

とします。


[所感]

ざっと試してみただけなんですが、Haml より Slim の方が簡潔に書けるみたいですね。

特に Haml で属性を書く場合、

%a{ "ng-hoge" => "hoge" }

と書く必要があるのに対して、Slim だと

a{ ng-hoge = "hoge" }

みたいに書くことができるのが便利そう。

ただ、最近は Haml を書くのに慣れてきたのでそのまま Slim に乗り換えるのか、と言われるとうーん…。

もう少し Slim 試してみるかなぁ。


[参照]

http://qiita.com/yterajima/items/53fd0387279510ff082a

http://app2641.hatenablog.com/entry/2013/06/21/123913

2014-07-04

[][]遊ぶようの github organization をつくってみた

最近…でも無いんですが、github の org の存在を教えてもらいました。

新しい github のページが欲しい場合、その度にアカウントを作る必要があると思っていたんですが、org で簡単に作れるんですね。

これは便利。

そんな感じで遊ぶようの org つくって AngularJS のコードを動かしたりしています。

github-pages と組み合わせれば簡単に Web でページを公開する事ができてよいですねぇ(まぁ github-pages を使うだけなら org でなくてもよいのですが。

便利な世の中だ。

2014-06-19

[]Chrome でローカルファイルを読み込む

Chrome で生の HTML ファイルなどからローカルファイル(.json など)を読み込むとエラーになる。

これを回避する場合は Chrome の起動オプションに --allow-file-access-from-files を付けて起動させる。


[参照]

http://q.hatena.ne.jp/1322307624