input[type=date] を使った時の挙動、実はいまだにブラウザによってまちまち。
Chrome はチープなピッカーを申し訳程度に表示するんだけど、macOS 版の Safari に至ってはピッカーすら出してくれない。ただし iOS、iPad OS 版の Safari はちゃんとしたピッカーを表示してくれる。
なので iPhone、iPad の場合は OS デフォルトのピッカーを、それ以外のブラウザの場合は jQuery でもなんでもいいんだけど Datepicker 的なものを表示するようにしてみた。
ニコニコログの開発の中ではタイムラインの更新機能のために "PullToRefresh.js" を利用しています。また、iOS版のニコニコログも基本的には TAppKit をベースに開発しているため、表示部分の多くは WKWebView を使用しています。
ニコニコログ開発の記録の連載記事の初期にも書いている通り、
以下のコードは CoffeeScript ですが、JavaScript や TypeScript の場合は便宜置き換えてみてください。
PullToRefresh.init({
mainElement: SELECTOR
onRefresh: ->
if window.webkit isnt undefined
window.webkit.messageHandlers.callbackHandler.postMessage('runHapticTouchSuccess')
})
window.webkit.messageHandlers.callbackHandler.postMessage('runHapticTouchSuccess')の部分で、WKWebView 側に通知を送ります。
前回と前々回はかなり開発寄りな記事になってしまいました。今回は遂に次期リリース予定の NikoNikoLog の開発中の画面のスクリーンショットを少し公開しちゃいます。
別に公開を勿体ぶっていたわけではないんですが・・・あくまでも開発中の画面です。実際、現時点では開発フェイズとしてはかなりリリースに近い段階に来ているのですが、それでも日々の開発やテスト、レビューの中で画面設計など変わる部分があったりします。
そこのところをご理解いただいた上で、開発中の画面をみていただけたら幸いです。
個人の GitHub でですが・・・loggerjs を公開してみました。loggerjs は JavaScript でフロントエンドの開発を行う際に欠かせない console.log をもうちょっとうまいこと使いたいって願望から開発しました・・・なーんて書いてみるのもいいんですが、実際はそういう console.log を使った作業が、TAppKit の開発自体、そしてそれを利用している NikoNikoLog の次期大規模アップデート の開発には必要不可欠な状態になったことから、もともとは TAppKit への組み込みライブラリとして CoffeeScript で開発していたものを、コンパイル不要で弄りたい人は弄りたい放題になるはずの JavaScript に書き換えて公開しました。
loggerjs は、以下のようにウェブブラウザの開発ツールの Console にログを出力します。
機能としては単純なものが多いのですが、主な機能は以下の通りです。
またまた前回に続き、NikoNikoLog のモバイルウェブ版の開発の話、しかもまた前回から引きずっているフロントエンド用フレームワーク開発の話です。
完全に開発者向けの記事が続いてしまって申し訳ありませんが、もうちょっとだけお付き合いください。
前回に続き、NikoNikoLog のモバイルウェブ版の開発の話です。
書かなきゃいけないことはたくさんあって、今整理しながら書いているのですが、ひとまず今回は完全に一般の方より開発者向けな話になってしまうかも。それではスタート。
JavaScript で文字列を検索する場合、いくつかの方法が用意されている。
とりあえず違いを表にしてみた。他にも exec とかあった気がするけど、とりあえず。
| 単純な文字列 | 正規表現 | 戻り値 | クラス | |
|---|---|---|---|---|
| indexOf | ○ | × | Integer (マッチしたインデックス) | String |
| match | △ | ○ | Integer (マッチしたインデックス) | String |
| test | △ | ○ | Bool | RegExp |
| search | △ | ○ | Integer (マッチしたインデックス) | String |
まずはそれぞれの検索スピードのベンチマークを資料として。
JavaScriptで文字列の有無判定方法の速度ベンチマーク（indexOf、match、test）
ちなみに上記の表で「単純検索」で△が多いのは、正規表現を使って単純検索するとかならできるから・・・みたいな感じです。
次にそれぞれの使い分け方をざっくり書いておく。
jQuery は重いけど嫌いじゃないです。
重い重いって言われながら、もう何年にもわたって第一線にいるわけでは、jQuery からの依存を100%断つことはなかなか難しい。逆にどっかで jQuery が何かしらの形で使われていれば、Yet Another な部分でも jQuery 使っておいた方がいい気もします・・・なんて独白はおいておきまして。とりあえず、Rails + Bootstrap でウェブなアプリを作れば意図的に外さない限り jQuery は使うことになりますし。
一応、jQuery プラグインの最低限の仕組みだけ理解しておきましょう。
jQuery.fn.NameOfPlugin = function() {
this.change( function () {
console.log($(this).val());
})
};
NameOfPlugin 部分がプラグインの名前になります。
上のコードを $(input[type=text]) なDOMに適用してやると、入力されているテキストが変更された時にログを履くようになります。
$( function () {
$('input[type=text]').NameOfPlugin();
});
あくまで基本的な定義の仕方ってだけのサンプルなので、そこに意味は求めないでください。
jQuery でチェックボックスの状態を取得したり設定したり、結構よく使うのに方法がいろいろあったりします。ただ現時点（2017年11月）での最適解はおそらく今回紹介するもの。
<input type="checkbox" name="checkbox_1" checked>
<input type="checkbox" name="checkbox_2">
チェックボックスがチェックされているかを取得する。
// 便宜的に式で評価してみる
if ( $('input[name=checkbox_1]').prop('checked') ) {
console.log('true');
} else {
console.log('false');
}
// 別に以下でも確認できる
console.log( $('input[name=checkbox_1]').prop('checked') );
jQuery のセレクタで書いている部分はお好きに。
次にセレクタで指定したチェックボックスにチェックを入れる。
$('input[name=checkbox_2]').prop('checked', true);
最後に同じ方法でセレクタで指定したチェックボックスのチェックを外す。
$('input[name=checkbox_2]').prop('checked', false);
このくらいはテンプレ的に覚えておくと便利です。