狛ログ

オフィス狛　技術部です。

先日6月11日に、Twitter API Version 1.0の提供が終了しました。
（2012年8月時点でアナウンスはされていて、今までは移行期間だったので、
そこまで話題にはなっていませんでしたが。）

弊社ホームページでは、API 1.1には移行せずに、
API 1.0提供終了時点でツイート表示も廃止する予定でした。
廃止する一番の理由としては、「ツイート、タイムライン表示の方式規定 *1」によるものです。

*1 公式ドキュメントのDeveloper Display Requirementsにある通りに表示する必要があり、
今まで独自レイアウトで表示していたものが、使用出来なくなるからです。

API 1.0終了に対する簡単な対応としては、ウィジェットがあります。
指定のURLを自分のサイトへ貼り付けるだけで、タイムライン表示が可能となります。

Twitterへログインし、「設定」 > 「ウィジェット」で作成可能です。



基本的には、上記で作成した後、コードを自分のサイトへ貼り付けるだけなのですが、
コードに手を加える事で、細かい設定を行う事が可能です。

カスタマイズするのは以下の部分です。

<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="xxxxxx">

幅と高さについて

width、heightを指定する事で、自由に変更する事が可能です。

<a class="twitter-timeline" width="520" height="200" href="https://twitter.com/username" data-widget-id="xxxxxx">

ちなみに、指定出来る最小の幅は180px、最大の幅は520pxです。
最小の高さは200pxです。

表示ツイート数について

data-tweet-limitで、、表示するツイート数を指定できます。
以下の例では、ツイート数を1件に指定しています。

<a class="twitter-timeline" data-tweet-limit="1" href="https://twitter.com/username" data-widget-id="xxxxxx">

表示UIについて

data-chrome属性に以下のオプションを指定する事で、UIを変更出来ます。
オプションは、複数同時に設定する事が可能です。

noheader
　ヘッダー（フォローボタンがある部分）を非表示にします。
nofooter
　フッター（ツイート用テキストボックスがある部分）を非表示にします。
noborders
　ウィジェットの枠線、ツイート毎の境界線を非表示にします。
transparent
　ウィジェットの背景を透明にします。

全て設定した場合の例は以下の通りです。

<a class="twitter-timeline" data-chrome="noheader nofooter noborders transparent" href="https://twitter.com/username" data-widget-id="xxxxxx">

その他

上記設定の他にも、「data-theme」でタイムラインのテーマ、
「data-link-color」でリンクの文字色、「lang」で言語設定などが可能です。
※詳細は、公式ドキュメントに記載されています。

弊社ホームページでも、廃止予定だったツイートの表示をウィジェットで代替しています。

public string GetAcceccToken()
{
    byte[] randomNumber = new byte[16];

    RNGCryptoServiceProvider rngCsp = new RNGCryptoServiceProvider();
    rngCsp.GetBytes(randomNumber);

    StringBuilder accessToken = new StringBuilder();

    for (int i = 0; i < randomNumber.Length; i++)
    {
      accessToken.AppendFormat("{0:x2}", randomNumber[i]);
    }

    return accessToken.ToString();
}

WebAPIなどで利用されるアクセストークン（ランダムな文字列）を作成するメソッドです。

今回は繰り返し部分を簡略化させていきます。

for (int i = 0; i < randomNumber.Length; i++)
{
    accessToken.AppendFormat("{0:x2}", randomNumber[i]);
}

昔の参考書ではお馴染みの繰り返し文です。

これをforeachで書き換えると、

foreach (byte bt in randomNumber)
{
    accessToken.AppendFormat("{0:x2}",bt);
}

Array.ForEach<byte>(randomNumber, delegate(byte bt)
{
    accessToken.AppendFormat("{0:x2}", bt);
});

Array.ForEach<byte>(randomNumber, bt => { accessToken.AppendFormat("{0:x2}", bt); });

Array.ForEach(randomNumber, bt => accessToken.AppendFormat("{0:x2}", bt));

オフィス狛　技術部です。

前回の「jQuery Mobile 1.3.1にバージョンアップしてみた。」の続きです。
前回から色々と調べていると、Google Analytics 埋め込みにも修正が必要な事が分かりました。

旧バージョンのjQuery Mobileでサイトを作成した時は、以下の記事を参考にしました。
jQuery MobileでGoogle Analyticsを使うために気をつけなければいけないこと

新バージョンでは動かない原因コードは以下の部分

$('[data-role="page"]').live('pageshow', function () {
  var u = location.hash.replace('#', '');
  u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});

正常に動作するように修正したのが以下のコードです。

$(document).on("pageshow", '[data-role="page"]', function () {
  var u = location.pathname + location.hash;
  u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});

liveがonになっているのが主な変更点です。

実は今回、jQuery Mobile を1.3.1にバージョンアップするに伴い、
jQuery本体自体も1.9.1にバージョンアップしていました。
1.9.1では、liveは廃止になり、代わりにonを使用するようです。

参考：
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ

※今回の記事と同じ対応をしている記事を見つけました。とても分かり易いです。
jQuery Mobile 1.3.1 で Google Analytics を設定するよ！

オフィス狛　技術部です。

旧バージョンのjQuery Mobileで作成したサイトをリニューアルする事になり、
ついでに、jQuery Mobile のバージョンアップしてみました。

正しく動作するまで苦労したので、対応内容をメモしておきます。

まず分かり易く動作しなかったのが、以下の二つ。

1. ページ遷移のアニメショーンが効かない。
2. 遷移後の画面で「戻る」ボタンが表示されない。

それぞれの対応内容を記載します。

１．ページ遷移のアニメショーンが効かない。

旧バージョンでは、以下のように記載していました。

$(document).bind("mobileinit", function(){
    $.mobile.defaultTransition = "slide";
});

新しいバージョンでは、defaultTransitionは無視されてしまうようです。
（ defaultPageTransition と defaultDialogTransition が追加されている）
実害が無いのであればこのままでもいいのですが、
折角jQuery Mobileを利用しているのに、
アニメーションが出来ないのは意味が無いので、以下のように修正しました。

$(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = "slide";
});

２．遷移後の画面で「戻る」ボタンが表示されない。

旧バージョンでは勝手に作成された「戻る」ボタンが、新バージョンになるとデフォルトでは作成されないようです。
以下のように明示的に指定するように修正しました。

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.addBackBtn = true;
});

とりあえず、正しく動くようになりました。
また何かあれば、記載しようと思います。

※対応は下記の記事を参考にさせて頂きました。

jQuery Mobile Beta1へのアップデートについてまとめたメモ