狛ログ

オフィス狛　技術部です。

弊社では、C#でプログラミングする際は、必ず StyleCop を利用しています。

StyleCop は、C#のコーディング内容をチェックするツールです。
インストールはNuGetのパッケージ管理で行っているので、下記などを参照下さい。

StyleCopインストール手順メモ

今回は、使い方の説明ではなく、日本語特有の問題についての解決方法です。

「StyleCopのインストール」というサイトにもある通り、
SA16xx系は、日本語環境では実用的では無いので、無効にする事がほとんどです。

ところが、SA1650だけ、設定画面で無効に出来ない。
（SA1650がない！？）

そのままビルドすると、大量に警告が出ます。

警告 xxxx SA1650 : CSharp.Documentation : The documentation text within the summary tag contains incorrectly spelled words

というわけで、SA1650を無効にする為には、クラス属性を指定する必要があります。

[SuppressMessage("StyleCop.CSharp.DocumentationRules", "SA1650:ElementDocumentationMustBeSpelledCorrectly",Justification = "For Japanese support")]
class SampleClass
{ 
}

こんな感じで、初期設定は色々と面倒ですが、StyleCopを導入すると、
プロジェクトのメンバーそれぞれのプログラムに統一性が出て、
後々見直しても、プログラムの中身が理解し易いのでお勧めです。

※追記
今回使用していたのは、NuGetからインストールしたバージョン「4.7.46.0」ですが、
NuGetを使用せずに、本家サイトから直接インストーラーをダウンロードして、
インストールした「4.7.49.0」だと、SA1650は設定画面にも表示されました。

オフィス狛　技術部です。

前回、androidとiosのWebクリップ設定を行いましたが、
今回はWindows8のピン留めについてです。

弊社ホームページで、試しにWebクリップの設定をしていない状態でピン留めしてみました。
すると、Webサーバのエラーログに、

File does not exist: xxxxxx/xxxxxx/browserconfig.xml

という内容が出力されていました。
ちなみに、ピン留めした時の状態は、


タイルの真ん中の画像はどうやらfaviconのようです。
タイルの色も、faviconの色が基調になっているようです。
タイルのサイズは、２種類（中と小）しか選ぶ事が出来ませんでした。

では、Webクリップの設定をしていきましょう。

と言うものの、実際は、下記URLで画像とXMLファイルを自動生成できます。

Web サイトを Windows 8.1 のタイルにしよう - Web サイトをピン留めする

基本は手順に沿って進めていけば問題ありません。
画像は、アップロードした画像を元に、４サイズ分(*1)作成されるので、
アップロードした画像のトリミングを４サイズ分行います。

*1 128×128、270×270、270×558、558×558

RSSフィードの設定する事で、ライブタイルのプッシュ通知が可能になります。

最終的に自動生成された（ダウンロードしたパッケージの）browserconfig.xmlと画像を
ドキュメントルートに置いて、htmlのmetaタグに下記を追加すれば完了です。
（画像のパスなど、その他の設定は全てbrowserconfig.xmlに記載してあります。）

<meta name="application-name" content="オフィス狛"/>

設定した後にピン留めした結果は以下の通りです。


ピン留めした画像サイズの変更も、４種類から選ぶ事が可能になっています。

前回と今回で、Webクリップの設定を行いました。

余談ですが、Windows8.1タブレットでスクリーンショット（画面キャプチャ）は、
タブレット本体にあるWindowsボタンを押しながら、音量のマイナスを押すと取れます。

オフィス狛　技術部です。

今回は、Webクリップ（apple-touch-icon.png）についてです。

先日、社内Webシステムのエラーログに、

File does not exist: apple-touch-icon.png

という内容が出力されていました。

"apple-touch-icon.png" はWebクリップといって、
スマホやタブレットでホーム画面にブックマークを表示する際のアイコンの事です。
社内システムではPCのみを対象としていたので、特に用意していませんでした。
オフィス狛のホームページではWebクリップは用意してあります。


上記はAndroid端末で見た場合ですが、左側がWebクリップを用意した場合で、
右側が用意していない場合です。



上記はios7の場合です。画像なしの場合は、サイトのキャプチャがアイコンになります。

設定方法ですが、Androidの事を考えないのであれば、
ドキュメントルートに "apple-touch-icon.png" という名前のファイルを置けばＯＫです。

Androidでは、以下の記述をhtmlファイルに追加する必要があります。（iosでも指定する事は可能）

<link href="apple-touch-icon.png" rel="apple-touch-icon"></link>

角丸処理は自動で行ってくれます。
rel の "apple-touch-icon" を "apple-touch-icon-precomposed" にすると、光沢無しの画像になりますが、
ios7からはフラットデザインになっている為、"apple-touch-icon"としても光沢処理は付かないようです。

ちなみに、

<meta name="apple-mobile-web-app-title" content="オフィス狛">

上記メタタグを追加する事で、アイコンの名称も設定する事ができます。（iosのみ）
日本語表記だと６文字が省略せずに表示されます。

Webクリップの画像サイズですが、
iOSヒューマンインターフェイスガイドラインによると、

iPhoneおよびiPod touchでは、次のサイズのアイコンを作成します。

• 120×120ピクセル
• 60×60ピクセル（標準解像度）

iPadでは、次のサイズのアイコンを作成します。

• 152×152ピクセル
• 76×76ピクセル（標準解像度）

との事です。
（昔は144pxとか114pxと言われていたけど変わった？）
画面サイズごとにリサイズされるので、一番大きい152pxで作成しておけば良いかと思います。

オフィス狛　技術部です。

前々回の記事「C#でモダンプログラミング」の続きです。

記事内では、最終的にArray ForEachを利用した繰り返し処理を行っていましたが、
Array ForEachは、繰り返し処理内でのbreak、continue、returnは使用できません。

例えば、以下のような処理があったとします。

int[] nums = new int[] { 1, 3, 4, 9, 12, 14, 15, 19, 20, 23, 28 };

int result = 0;
foreach (int num in nums)
{
    if (num > 20)
    {
        break;
    }
    else
    {
        result += num;
    }
}

ソートされた配列内で、値が20以下の場合、値を足し込み、20より大きい値が存在した時点で、
繰り返し処理を終了しています。

これをArray.ForEachで書き換えて、以下のようにするとコンパイルエラーになります。

  int[] nums = new int[] { 1, 3, 4, 9, 12, 14, 15, 19, 20, 23, 28 };
  int result = 0;
  Array.ForEach<int>(nums, num =>
      {
          if (num > 20)
          {
              break;        //コンパイルエラー
          }
          else
          {
              result += num;
          }
      }
  );

では、どうすれば良いのか？
方法は色々あると思いますが、「配列内の20以下の値を足し込む」では無く、
「配列から20以下の値を抽出し、抽出した値を全て足し込む」で対応してみます。

匿名メソッド（ラムダ式）では以下のようになります。

int[] nums = new int[] { 1, 3, 4, 9, 12, 14, 15, 19, 20, 23, 28 };
int[] findnums = Array.FindAll(nums, num => num <= 20);
int result = 0;
Array.ForEach(findnums, num => result += num);

LINQでは以下の通りです。

int[] nums = new int[] { 1, 3, 4, 9, 12, 14, 15, 19, 20, 23, 28 };
var query = from num in nums
            where num <= 20
            select num;
int[] findnums = query.ToArray();
int result = 0;
Array.ForEach(findnums, num => result += num);

ちなみに、今回はArray.ForEachに視点を当てているので、
匿名メソッドやLINQも冗長な書き方になっています。
今回のプログラムの仕様(条件判断して数値を足し込む)を満たしたいのであれば、
通常は匿名メソッドやLINQの集計演算子（SUM）を使用します。

オフィス狛　技術部です。

先日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 を設定するよ！