読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

SNS系アプリのタイムラインにある「xx時間前に投稿」を手軽に実現するには?

この記事は、あすとろなんとかastronaughtsさんさんが始められた「Titanium mobile “early” Advent Calendar 2012」向けに書いています。11月1日 ~ 30日まで毎日誰かが Titanium Mobile についての記事を書いていくというイベントです。

で、タイトルの答えを先に書くとMoment.js を使いましょう

Moment.jsって?

日付と時刻の面倒な変換を手軽に実現できるCommonJSなJavaScriptライブラリです。

このライブラリを利用するとこんな感じにとっても簡単に変換できます。

f:id:h5y1m141:20121105082939p:plain

事前準備

Moment.js のサイトからMinifiedされたファイルをダウンロードします。

デフォルトは英語表記なのですが、i18n(internationalization。国際化)対応しているので、日本語表記をした別ファイルを準備することで手軽に日本語化も出来ます。 日本語化の対応を自分でやるのは面倒だなぁ・・と思っていたら、jQuery プラグイン livestamp.js を使ってみました。というエントリで株式会社ジーティーアイの佐藤 毅 さんという方が作成したmoment.lang_ja.jsが紹介されていたのでそちらを利用しました。

使い方

require()で2つのファイルを読み込みます。Moment.jsを先に読み込み、その後に、佐藤 毅 さんが作成したものを読み込みますが、なぜかmoment.lang_ja.jsのファイル名だとうまく読み込めなかったのでmomentjaという形でリネームしました。

ソース

var dd, mainWindow, moment, momentja, timeLabel, timeLabel1, timeLabel2;

moment = require('moment.min');

momentja = require('momentja');

mainWindow = Ti.UI.createWindow({
  title: 'Moment.js Sample',
  barColor: '#59BB0C'
});

dd = new Date();

timeLabel = Ti.UI.createLabel({
  font: {
    fontSize: 24
  },
  Color: '#fff',
  left: 0,
  top: 5,
  width: 300,
  height: 100,
  text: "ベースとなる日付時刻:\n" + dd
});

timeLabel1 = Ti.UI.createLabel({
  font: {
    fontSize: 18
  },
  color: '#ddd',
  left: 0,
  top: 105,
  width: 300,
  height: 100,
  text: "ベースとなる日付時刻からの経過はfromNow()を適用:\n\n→" + (moment(dd).fromNow())
});

timeLabel2 = Ti.UI.createLabel({
  font: {
    fontSize: 18
  },
  color: '#ddd',
  left: 0,
  top: 205,
  width: 300,
  height: 100,
  text: "曜日表示はformat('dddd')とすればOK\n\n→:" + (moment(dd).format('dddd'))
});

mainWindow.add(timeLabel);

mainWindow.add(timeLabel1);

mainWindow.add(timeLabel2);

mainWindow.open();

おまけ

実は最初空気読まずにこんな感じでがっつりしたサンプル書いてこの解説記事を書いてました。

明日は @sngmr さん、よろしくお願いしますー!