狛ログ

2013年6月22日土曜日

Twitterウィジェットの設定。

オフィス狛 技術部です。

先日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」で言語設定などが可能です。
※詳細は、公式ドキュメントに記載されています。

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

,

2013年6月15日土曜日

C#でモダンプログラミング。


オフィス狛 技術部です。

業務システムを作成していると、どうしてもレガシープログラミングを行ってしまう傾向があります。
たぶん、「現行システムの改修だから(現行プログラムがレガシーだから)」とか、
「フレームワークのバージョンを上げるのは影響が大きい」など理由はあると思います。

ですが、モダンプログラミングは可能な限り取り入れたいです。

まずは以下のプログラムをご覧ください。
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で書き換えてみます。
Array.ForEach<byte>(randomNumber, delegate(byte bt)
{
    accessToken.AppendFormat("{0:x2}", bt);
});

最後は、匿名メソッドをラムダ式を使って書き直してみます。
Array.ForEach<byte>(randomNumber, bt => { accessToken.AppendFormat("{0:x2}", bt); });

メソッド内が単文の場合は、{}は省略できます。暗黙の型指定が可能な場合は、<byte>も省略できます。
Array.ForEach(randomNumber, bt => accessToken.AppendFormat("{0:x2}", bt));

最近C#初めた人にとっては、当たり前の書き方なのでしょうが、
C#に数年のブランクがある人は、ちょっと戸惑ってしまうかもしれません。

何事も慣れだとは思いますが・・・。

2013年6月8日土曜日

jQuery Mobile 1.3.1とGoogle Analytics。

オフィス狛 技術部です。

前回の「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 を設定するよ!

,

2013年6月4日火曜日

jQuery Mobile 1.3.1にバージョンアップしてみた。

オフィス狛 技術部です。

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

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

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

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


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

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


旧バージョンでは、以下のように記載していました。
$(document).bind("mobileinit", function(){
    $.mobile.defaultTransition = "slide";
});

新しいバージョンでは、defaultTransitionは無視されてしまうようです。
( defaultPageTransition と defaultDialogTransition が追加されている)
実害が無いのであればこのままでもいいのですが、
折角jQuery Mobileを利用しているのに、
アニメーションが出来ないのは意味が無いので、以下のように修正しました。
$(document).bind("mobileinit", function(){
    $.mobile.defaultPageTransition = "slide";
});

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


旧バージョンでは勝手に作成された「戻る」ボタンが、新バージョンになるとデフォルトでは作成されないようです。
以下のように明示的に指定するように修正しました。
$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.addBackBtn = true;
});

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

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

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