- 2014/04/24
- プログラミング
まあ……大体出来た……かな。iPhoneからでも使い易くなりました。
レスポンシブデザインとは何か
PCとかiPhoneとか、タブレットとか世の中には色んなサイズの端末があります。
これをCSSを工夫することによってなんとかサイズの違う多様な端末に対応したデザインにしようと言うのが、レスポンシブデザインになります。
詳しくはこの辺読んでもらうとして。
ブラウザの幅を変えてみてもらえれば成果が分かると思います。
何をやったのかと言うと
- 画面幅が小さくなったら display: noneでサイドバーを消す
- それより小さくなったらメインの幅を%に
- トップイメージの画像や文字の位置を%で指定。
- サムネイルの大（size-large）と中（size-medium）を％表示に
- iPhone用にヘッダーにメタタグを記述。
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
みたいなことを作りながら1コ1コ対処してみたらなんとなくそれっぽくなりました。
基本的に幅さえなんとかすればなんとかなります。高さはautoで十分です。
メディアクエリー
画面の幅でCSSを切り替えるのにはメディアクエリーと言うのを使います。
ソース書くとこんな感じ。
幅600ピクセルを超えると幅がauto（本来のサイズ）に切り替わります。
img.size-large{
width: 100%;
height: auto;
}
@media screen and (min-width:600px){
img.size-large{
width: auto;
}
}
padding……
なんかいくらやっても横スクロールバーが出やがりまして。凄く謎だったんですが、paddingのせいでした。
paddingと言うのはdivとかの枠の内側に余白を持たせるCSSなんですが、これが元の幅に”足して”サイズを決定するものなんです。
例えば幅300ピクセルにpaddingを左右20ピクセル入れようと思ったら、幅を260ピクセルに変更しないといけません。……誰なんでしょうねこの仕様を考えた人は……。
という謎仕様によってあちこちに微妙なズレがあったんです。最終的にほとんど使わないことにしちゃいましたけど。いや、強敵だった。レスポンシブデザインの大ボスがpaddingだったとは。
もしやってみて、何故か横スクロールしてしまうと言うときはpaddingとかで何かはみ出てないかチェックしてみるといいかと思います。
- 2014/04/23
- プログラミング
- 2014/04/03
- アプリ
iOS7、消費税計算に対応
kaimono1.4リリースしました。iOS7、消費税計算に対応。
地味〜なところで言うと合計の3ケタ区切りに対応してます。これで数千万の計算でもダイジョブ大丈夫。
消費税はオプションでオンオフ出来ます。いらないときも安心。メイン画面にオンオフつけようかとも思いましたが煩雑過ぎるのでこうなりました。
プログラムの不思議
ところで、アプリ作るといつも思うんですが、作ってる最中はえらい大変なのに、出来上がると簡単に作ったように見えるのはどういうことなんでしょうね？今回も技術的にはチャレンジャーだったんですが、まるで普通に見えるのはどう言うことなのっ。
シンプルに作るのを心がけているせいなのか、はたまたそういうものなのか、それとも妖怪に騙されてるとか。え、妖怪？だまされてる？
とか思いましたが、よくよく観察してみると、プログラム作業の半分は「ドキュメントを読むこと」なんですね。動かすのには知識が必要。そこに時間が吸い取られます。まあ知識なので、一度習得すれば作るのは速くなると思います。
そして忘れ物
About画面のレビューボタンにリンク忘れました〜。次で対応。
お役に立ちますように。
- 2014/03/28
- プログラミング
Delta？
Xcode５でiOS6とiOS7に対応するためにパーツにiOS6/7 Deltaと言う値を設定する必要があります。これを使えばあのアイヴデザインで生じたiOS6とiOS7とのにっくき差が吸収出来てしまうのです。手動ですが。んー、自動でやってくれって気もしないでも無いですが……。
で、これを実現するためにWebページの例を見ながらやってみました。AutoLayout外して…サイズインスペクタを……サイズインスペクタを……あれっ？……無いよ。
ググって辿り着いたのはやはりStackOverFlow。
http://stackoverflow.com/questions/19306762/inspector-size-on-xcode-5-is-showing-nothing
やー、毎回頼りになるねー。えーっと、クリックしろ？クリックと。ポチ。……ほう、畳まれてましたか……気付くの無理。
以上、何でデフォルトで畳まれているのかアップルに聞きたいでした〜。参考まで〜。
オマケ情報
実はこのデルタと言う値はナビゲーションバーの透明をオフにすることによって不要になります。ナビゲーションバーの分だから当然ちゃ当然なんですが。
Storyboardで設定出来ます。
- 2013/12/27
- 制作ツール
Mac用のドットツールは少ない
WindowsだとEdgeとかGaleとかあるんですがMac用のドットエディタって無い。過去に何本かシェアウエアであって買ってたような気がするんですが、何だったやら…（覚えてない
Pixen!
そこでGoogle先生に聞いてみたところ、見つけたのがこれ。Pixen！みんな大好きMITライセンス！
なんとレイヤーが使える。いや今どき普通か。いやしかし、これが次のアニメーションになると普通じゃなくなるのですな。
アニメーション
アニメーションが作れるんですね。しかもレイヤーを保持したまま。これかなり理想的。某アドビのソフトとかレイヤーがコマになっちゃってますからね。そうじゃないそうじゃないんだ。レイヤー構造を保ちつつ新しいフレームが欲しいんだ。
上の画像の例で言うと、本体とトサカを別レイヤーにしてそれぞれアニメーションさせてます。
ちなみにアニメーションのファイルは普通の画像とは別なので、後からアニメーションにするとレイヤーとかパーになるので注意。Animation > Create Animation From Imageでコンバートなんですが、レイヤーが統合されちゃいます。
File > New Animationで新規に作りましょう。
バグもいくつかありますが
・たまに色が拾えなくなったりする。＞謎。そのうち直った。
・他のソフト使って戻ってくるとツールウィンドウが見えなくなってたりする＞一度デスクトップをクリック。
しかし、いいんじゃないでしょうか。現状十分使えます。ドット描くならおすすめ。
- 2013/12/25
- ハードウェア
なぜか描きやすかったMacBookAir11インチ + intuos4 small
ちょっと前のこと。MacBookAir11インチとintuos4（小さい）を旅先に持っていったんですね。で、これで描いてみたらなぜか予想外に描きやすくて何だろうと思った訳ですよ。
これはintuos4（小さい）が高性能だからかなと思い、普段使ってる24インチモニタにMacBookAirを外部接続し、使ってみたのですが、おかしい、別に描きやすくない。
いつも繋いでるintuos3（大きい）の大きいやつに替えてみると…うん、描きやすい。あれ？こっちの方が面積大きいから良いのかなと思い直し、外部モニタ外したMacBookAirにituos3（大きい）を繋いでで使ってみたら…描きにくい。
性能では無く画面に合った大きさ？
思ったのは、もしや性能とか関係無く、画面に合った大きさのタブレットが描きやすいのではないかと。たぶん、手の移動量と画面の描画が一致するせいかなと。
つまり、大きい画面には大きいタブレットを。小さい画面には小さいタブレットが正解なんじゃないかと思います。
大画面27インチに小さいタブレットを使ってる人とかいるんじゃないかなと思うのですが、多分描きづらいと思うのです。もし知り合いが大きいタブレットを持っていたら借りて試してみるのもいいかと思います。
突き詰めると画面とタブレットが一体になった液タブ、または紙と鉛筆が最高なんじゃなかろうかと言う話はありますが、それは置いておいて。
あくまでも推測ですが参考まで。
- 2013/11/09
- アプリ
え、しばらく何をやっていたかと言うと、無限に広がる大宇宙……ではなくトリ宇宙に行ってました。Cocos2dで。
今も平行して複数作ってるんですが、まだ1個も完成しなく…いまいちつまらないから放置とか。まあ色々。いちばん大きいのはやはりプログラム部分で、慣れてないのもあってどう作ればいいのかがまず分からず。で、考えたり調べたりしてるうちに幾年月…（そんな経ってないよ！
上の動画は製作中の鳥シューティング（仮称）。隕石がまだ某氏の作った唐揚げを流用してたりしますが。まあそこはもちろん変えますけど。
そんなこんなでキャラバンは進む。
- 2013/08/03
- アプリ
iPhone用アプリ第2弾
MaMenu入れると3本目な気がしないでもないですが。
ラーメン用。ラーメン屋の券売機シミュレーター……風味のタイマー！こんな真夏に！……まあ、冬にでもなったら思い出してあげて下さい。
基本的にシミュレーターとして作ったので、拙者、素早く操作出来るUIとか捨て申した。捨て置いた。御免。一応そつなくタイマーとして機能しますけれども！
1〜7分まで測れます。
ラベルをカスタマイズ
ラベルがカスタマイズ出来ます。お好きなメニューに。有名店のあのメニューも再現可！……まあ、ラベルだけだけどね！
ノーティフケーション対応
ノーティフィケーション対応。いわゆる通知。アプリを終了しても本体にこの時間になったら教えてねって通知お願いしてあるので数分後にピロッとか通知が出ます。音も鳴ります。音の設定は本体の通知設定使ってるのでそっちで設定してね。
通知使ってるので設定したらゲームとかやっちゃってOK。シチュエーションとしては、お湯入れてタイマーかけて、なんかゲームとかTwitterとかやるって感じですね。
あ、おやすみモードとかいう罠があるので、夜中に使う場合は本体のそれをオフってやって下さい。じゃないと鳴りませぬ。
8カ国語対応とか
今回は比較的多言語にしやすい構造だったので8カ国語対応とかしてみました。主にインスタントラーメンの消費量が多い国とか。日本語、英語、簡体中国語、繁体中国語、ポルトガル語、スペイン語、フランス語、インドネシア語。
…まあ、多分怪しい言語になってるとは思いますけどね〜！
ラーメン用。 
- 2013/07/09
- アプリ
背景画像を設定出来るように
ウチのスーパーウェポン（スーパーで使うウェポンの意）こと「kaimono」に背景画像を設定出来る機能をつけました。
開発環境だと簡単に画像をプロジェクトにドラッグドロップしてちょっと変更すれば設定出来るので、個人的にはけっこう前からやってたんですが、ついに誰でも。どなたでも。
画面遷移というもの
これをやるには設定画面を新設することが必須だった訳で。これがなかなか難しかった。今だとストーリーボードとやらを使えばチョチョイ（言い過ぎ）と出来るらしいのですが、このプロジェクト、まるで移行していないので、とりあえず勉強も兼ねて自力で画面遷移する方式をとってみました。やー、大変ダタヨ。
カメラまでつけた
やらなくても良かったんですが、iPhoneから画像を選択する方法を書いているWeb記事にはたいてい2番目に「カメラを起動」という項目がありまして。つけるしか！…（二日程格闘）…つきました！
いるかどうかは別として
個人的にうれしい機能なのですが、他の方はどうなのやら。まあ、設定画面自体は今後どうしてもいるものだし、スキルとしてiOSの画面遷移は必須なのでまあ良かったんですがはてさて。
ちなみに
PCまたはMacから画像を持ってくにはiTunesで写真を共有して、写真ライブラリから選択すれば出来ます。この辺分かりづらいんですよねー。
