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-01

[]ng-table を試してみた

昨日言ってた ng-table を軽く試してみました。

うんこ過ぎるのでなにか無いかと探してみたら ng-table なるものを見つけた。


[ソース]

<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='http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js'></script>
    <link href='http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css' rel='stylesheet'>
    <link href='http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css' rel='stylesheet'>
    <link href='stylesheets/style.css' rel='stylesheet'>
    <script language='javascript'>
      angular.module("MyApp", ["ngTable"]);
    </script>
  </head>
  <body>
    <style>
      .ng-table {
        border: 1px solid #000; }
    </style>
    <script>
      var ngTableDemoCtrl = function ($scope) {
      $scope.users = [{name: "Moroni", age: 50},
                      {name: "Tiancum", age: 43},
                      {name: "Jacob", age: 27},
                      {name: "Nephi", age: 29},
                      {name: "Enos", age: 34}];
      };
    </script>
    <div class='container'>
      <br>
      <div ng-controller='ngTableDemoCtrl'>
        <table class='table' ng-table=''>
          <tr ng-repeat='user in users'>
            <td data-title="'名前'">
              {{ user.name }}
            </td>
            <td data-title="'年齢'">
              {{ user.age }}
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>

[出力]

http://gyazo.com/a8c7d355525b727b49bcd46186f0eb9d.png


こんな感じ。

実際に table を出力しているコードは

<table class='table' ng-table=''>
  <tr ng-repeat='user in users'>
    <td data-title="'名前'">
      {{ user.name }}
    </td>
    <td data-title="'年齢'">
      {{ user.age }}
    </td>
  </tr>
</table>

このあたりになります。

各行ごとの列データをリストで ng-repeat している感じですね。

とりあえず、表示するまではやってみました。

拡張性とかどんな感じなのかな。

2014-06-30

[][]ng-table

最近、AngularJS で table を書いているのだけれうんこ過ぎるのでなにか無いかと探してみたら ng-table なるものを見つけた。


その名の通り、AngularJS で table を扱えるように拡張したものらしい。

まだ触ってはいないのだけれど Example を見てるとなんか便利そうな感じがする。

2014-06-24

[]AngularJS でローカルの json ファイルを読み込む

AngularJS で json ファイルを読み込みたい場合は angular-resource を使用します。



[index.html]

<html ng-app="phonecatApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script>
    <script src="./script.js"></script>
  </head>
<body ng-controller="PhoneListCtrl">
  <input type="text" ng-model="query.snippet" placeholder="検索">
  <ul class="phones">
    <li ng-repeat="phone in phones | filter:query">
      {{phone.name}}
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

[script.js]

var phonecatApp = angular.module('phonecatApp', ["ngResource"]);


phonecatApp.controller('PhoneListCtrl', ["$scope", "$resource", function ($scope, $resource) {
    var contents = $resource("./data.json");
    // List(一番外側 [])を取得する場合は query()
    // Object(一番外側が {}) get() を使用する
    $scope.phones = contents.query();
}]);

[data.json]

[
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
]

Chrome だとローカルのファイルを読み込むことが出来にないので注意してください。

Firefox では問題なく読み込むことが出来ます。

Chrome でも読み込みたい場合はここら辺を参照してください。


[参照]

http://www.walbrix.com/jp/blog/2014-01-angularjs-resource.html

2014-06-20

[]AngularJS の $watch でリストの要素を監視する

$watch でリストの要素を監視したい場合、$watch の第三引数に true を渡すことで、リストの中身やオブジェクトの要素を監視するようになります。


$scope.list = []

// $scope.list の要素が変更された場合にも呼ばれるようになる。
$scope.$watch("list", function (){...}, true)

ただし、この設定の場合はパフォーマンスに影響が出てくるようなのでご注意を。


[参照]

http://angularjsninja.com/blog/2013/12/13/angularjs-watch/