しかしAngularJSを使うと今までwebサイトの概念として当たり前だったアクセスの度にサーバー側でHTML生成してフルリロード、という概念を変えたSAP(シングルページアプリケーション)という概念のアプリを作ることができるらしい。JSONを使って必要なデータのみをやり取りする、まさにネイティブアプリのような動作にすることができるっぽい。

IonicやOnsenUIはAngularJSと連携していわゆるハイブリッドアプリを作るためのUIフレームワークとなる。HTML5とCSSをベースとしたこれまでのWebアプリに近い開発が可能。Cordovaと連携することでワンソースでiosとandroid(マテリアルデザイン)用のアプリを生成することが可能。Cordovaはjavscript経由でネイティブに特化したAPIを呼ぶためのプラットフォームのようなもの。

現在bootstrapでモバイルファーストでサイト作成しているとはいえ、いずれアプリ版も出したいし、そうなってくると最初からハイブリッドで作れた方が良いに決まっている。まだ画面設計を始めて1か月足らず。サーバー側の実装もこれからだし、今ならまだ軌道修正ができる。

とはいえ、AngularJSとか今まで触ったことないし、IonicやOnsenUIのお作法も覚える必要があるだろうし、少なく見積もってbootsrapでモバイル用のwebサイトだけ作るのと比較して3か月は余計にかかるんじゃないかと思う。時間に余裕があるのであれば迷うことなくbootstrapを捨てるんだけど、webだけでよいなら今のbootsrapのままで問題無いし、でも後でアプリ出したいってなった時に時間がかかっちゃうよな～。今を優先するかどうするか。

よし、今日だけionic使ってみよう。今日だけ。今日だけ捨てよう。実際に使ってみて時間がかかりそうであれば諦めもつく。今実際に手を動かしてすらいないからメリットが分からないだけで、ecサイトくらいだったらそんなに複雑なことしないし、意外とコピペ中心でガンガン進めることできるかもだし今日残りの時間でionicに移行するか決定しよう。

追記
windowsでionicをひとまず動かしてみた感想。やっぱめんどうくさそうｗｗｗ。cocos2dxもある程度使えるようになるまで半年くらいかかったけど、似たような空気を感じた。やっぱ素直にbootsrap使ってアプリ対応の余裕ができたらまた考えることにする。

資産形成におすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html

2016-11-10

php 例外時のデバッグは__toStringが便利

php

__toString実行しておけばエラーの呼び元とか行数とか出してくれるので便利

サンプル

<?php
try {
  throw new Exception();

} catch (Exception $e) {
  $this->log($e->__toString());
}

2016-11-07

sql joinの条件とwhereの条件の違いについて

sql mysql

ケース1

left join t2 on t2.t1_id = t1.id AND t2.status = 'ERROR'

ケース2

left join t2 on t2.t1_id = t1.id
中略
where t2.status = 'ERROR'

ケース1の場合は結合前の条件となるため、ERRORでないt2のデータもNULLとしてデータを取得する。
ケース2の場合は結合後の条件となるため、ERRORでないt2のデータはおろかt1のデータも取得できなくなってしまう。(inner joinならどちらも一緒)

要はleft joinしているテーブルに対する条件はwhereには記述しない方がよいってことか。

俺は何年sqlをやっているんだろう。やっぱり死んだ方がいいな。

2016-11-06

css div内のある要素だけ余白を無視したい場合はネガティブマージンを使えばよい

css

例えばdiv内に15pxのpaddingが設定されていてその中にimgタグを入れるケースでimgタグだけ15pxのpaddingの設定を無視したい場合、imgタグに-15pxのmarginを設定してやれば、imgタグにはpaddingが適用されなくなる。

2016-11-06

css display:table display:table-cell について

css

floatとか使わなくてもtableのように分割できて便利。vertical-alignも使える。後でまとめること。

2016-11-05

jquery slickとphotoswipeを連携する

javascript

前記事
jquery bxsliderとphotoswipeを連携する - 技術ブログ

bxsliderの挙動がスマホだといまいち(スワイプ中にスクロールしてしまう等)だったのでslickに変更。

http://kenwheeler.github.io/slick/
slick
http://photoswipe.com/
photoswipe

slickで画像をスライド表示させ、画像クリック時にphotoswipeで拡大表示させたい場合の話。
slickもliで画像を並べたい場合、bxsliderと同じように「FIGURE」を「li」に変更する。さらにslickで「dots:true」にするとドットをクリックした時にエラーが出るのでliに適当なクラスを指定して条件に追加する。

変更前 js

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
});

変更後 js

var clickedListItem = closest(eTarget, function(el) {
  return (el.tagName && el.tagName.toUpperCase() === 'LI' && el.className && el.className.indexOf('img-li') != -1);
});

html

<ul class="item-img my-gallery">
 <li class="img-li"><a href="large1.jpg" data-size="1024x1024"><img src="small1.jpg" /></a></li>
 <li class="img-li"><a href="large2.jpg" data-size="1024x1024"><img src="small2.jpg" /></a></li>
</ul>

もう一個やっかいなのが、slickはliタグの前後に余計なcloneタグを作ってしまい、photoswipeがそれも拾ってしまって表示した時にカウンターとスライドがおかしくなるため、slickのオプションに「infinite: false」を指定すること。(ただしこれを指定するとslickのループが無効になる)

$('.item-img').slick({
  infinite: false,
  dots:true
});

あっちが立てばこっちが立たない。汎用的なライブラリだとそんなんばっかり。妥協したくなければ結局自分で作るしかないってことだわ。

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html