PhoneGap（Cordova）でアプリ制作
ようやくHelloWorld以外のアプリを作った。
Javaは携帯アプリの時に2回開発環境を構築し2回ともHelloWorldまでで諦め、androidアプリも2回開発環境を構築し同じくHelloWorldまでで辞めてしまっていた。
どうしてもJavaだと学習コストを考えると面倒になってしまうのだ。
今回はJavaやobject-cを諦めてhtml5（PhoneGap）にし何とか3ヶ月かけて完成にこぎ着けた。 (さらに…)
Category ‘制作日記’
2012年9月のOS・ブラウザシェア
WEBサイトを作るときにJavascriptやCSSの対応状況が気になりますが、最近ではそのベンダー接頭辞はいつまで書くの？ | Unformed Buildingのようにベンダープレフィックスを書くか書かないかも悩みどころで、これらの判断材料になるブラウザやOSのシェアをGoogleAnalyticsでちょいちょいチェックしていたのですが、ちょっと勢いづいてまとめてみました。
OSシェア
| Windows | 49.81% |
|---|---|
| Android | 22.18% |
| iOS | 15.55% |
| Docomo | 3.91% |
| Mac | 3.49% |
| au | 3.48% |
| SoftBank | 0.72% |
スマホが増えたとはいえ未だWindowsが多いです。
フリーランスの為の希望年収で単価（人日、時給）計算
Webサイト制作の見積書を作るときに予め読んでおきたい記事まとめ13個をざっと読んでみた。
ビジネスマンとしてクライアントの出せる金額の限界を読み可能な限り高い金額を提示するのが正攻法かもしれないけど、交渉能力の無い細々SOHOには想定以上の金額は出しづらいので、大抵は様々な作業に単価を付けるか人月、人日（人一人が1日（8時間）で出来る作業量）、時給で計算する事が多い。
コーディングはルーチンワークなので作業ボリュームが分れば作業単価で算出しやすいし、デザインは一応の基準はあるが気分的な部分が大きく計算式ではあまり出さないが、プログラム系は人日計算の場合が多くなるが、その単価を決めるのは自分で基準が曖昧だ。
そこで、Web業界の業務委託単価についての考察の計算方式を元に希望年収を基準に単価を算出するツールフリーランスの為の希望年収で単価（人日、時給）計算を作った。
年齢別＆性別の平均年収から選択する事も出来るし、任意の希望年収を入力する事もできる。
ただ人日計算は作業の早い「熟練した人」と手の遅い「不慣れな人」と同じ単価だと熟練した人の方が安くなってしまい、同じ人物でも、よく知ってるAPIを使う場合と未だ使った事の無いAPIを使う場合では作業時間が変わってしまうという問題がある。
そこで、私の場合は見積もりするときは全てに精通した熟練した人のつもりで算出する様にしている。
仮に、自分の勉強不足で時間がかかり時給500円になったとしても、勉強代（勉強時間）として納得できる。
Retina時代のスマホサイトのタイトルロゴはSVG
「Retina時代のスマホサイトのタイトルロゴはSVGがいい」と何処かに書いていたので作ってみた。
元画像はマイリリースのスマホ版トップのロゴ画像で元は480×109で作成して、iPhoneだと縦(320px)にも横(480px)にも使える様にしてる。
元々FireWorksで作成していたのでJPEG・PNGはRetinaテスト用に倍の解像度に変更しするだけで済んだが、SVGはFireWorksが未対応だったのでイラレに書き出し作り直した上でエディタでフィルタを追加したりと微調整した。
よくやる2倍サイズのJPEG画像（23.70KB）
モヤモヤが出るので今回の様なロゴ画像には向かないJPEGだけどRetinaだとそんなに問題無さそう、グラデの掛かった画像の圧縮率は魅力的
よくやる2倍サイズのPNG画像（39.88KB）
RetinaだとJPEGと画質は分らないし容量も大きい、グラデーションが無ければ色数を落として圧縮率を上げる事も出来るかも
SVG画像（8.85KB）
予想以上に低容量、SVGは表示が重いらしいがこのサイズだと差は分らない。
safariだとfilterが上手く動かないのかドロップシャドーが効かないみたいで昔のイラレみたいに手作業で追加する必要があり、容量も若干増える事になってしまう。
80歳まで生きたとしても、人生って3万日しかないんだよ
しょこたん こと「中川翔子」さんが友人に「80歳まで生きたとしても、人生って3万日しかないんだよ」と言われ、人生の短さに気づき、自分らしく生きることにしたそうです。
そこで「80歳まで生きたとしても、人生って3万日しかないんだよ」を作りました。
平均寿命を元に残された日数を算出します。
ネットで調べると友達というのはマリア（伊藤彩華）さんという話や台詞も「3万日しかないんだよ。短くない?」とか微妙に違うバージョンもあったのですがDON!の記事をベースにしています。
マルチ壁紙チェンジャー
ネットをブラウジングし、かっこいい壁紙を見つけては保存してる。
windows7になってからOSの機能で壁紙を毎日変更できるようになったので集めた壁紙も有効利用できるようになった。
ただ、ウチは2台のマルチモニタ（デュアルモニタ）でそれぞれ解像度が違い普通に貼り付けるとどちらかの壁紙が残念な状態になってしまう。
手作業で画像を連結させた壁紙を用意し、画像の配置を「並べて表示」にするといい感じになるけど、これだと毎日変更するのが大変になってしまう。
そこで、壁紙を結合して設定するソフトを作った。
5年ぐらい前に同じサイズのモニター用のアプリは作っていたのだけど、汎用性が無かったので個人的に使っていただけだったが、今回は色んな解像度もOKで横にさえ並んでいれば何枚のマルチモニタでもOKなので公開する事にします。
CSSだけで角をカット
画像を使わずCSSだけで角が欠けた表現をする方法がBeveled corners & negative border-radius with CSS3 gradients | Lea Verouに書かれていた。角丸の表現も飽きてきてたので新鮮だったが、CSSの量が多く（ベンタープレフィックスの為だけど・・・）面倒なのでジェネレーターを作ってみた。
「Css3 Corner Cutter」
この角が欠けた表現をする仕組みは背景を4分割してそれぞれの角に透明から急に色が付くグラデーションを塗って角が欠けた表現をしているので、背景もうまく透過している。
ただ、元のCSSだときれいに4等分（縦横50％）しすぎで要素の幅や高さが奇数の場合に隙間があいてしまっていたので、ジェネレーターでは縦横51％にして少しかぶせて隙間が現れ無いようにしています。
MooToolsとSlideshowとIE9
MooToolsのプラグインSlideshow 2!を使ったサイトを過去に作っていた。
Slideshow 2!はすごく重いけど（この時点で問題があるがクライアントの希望なので・・・）、簡単にかっこいいスライドショーのアニメーションを実現するするプラグインで制作当初はちゃんと動いていたが今日InternetExplorerで見てみると「DOM Exception: INVALID_CHARACTER_ERR」なんてエラーが現れた、しかもmootools.jsの15行目とか言ってる。
調べてみるとSlideshow 2!が使用してるフレームワークMootoolsでエラーが出たので最新版のMootoolsに差し替えてみたが変化なし。
検索しても日本語サイトに解説してるところが見つからないのでがんばって英語のサイトを見てみると1.2.5ならOKっぽい事を書いていたが今度はslideshow.js側でエラー。
最新版のMooTools1.4.3にしてもMootoolsでエラーが出る。両方とも最新にしようと思ったがSlideshow 2!の最新版はMootools 1.3用だった。
今のところ問題なのはIE9だけなのでIE8の互換モードを使う事にした。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />IE8だと描画速度が落ちそうな気がするが仕方ない。
面積統一計算機
仕事で使うつもりで作ったけど使わなくなったのでアップしときます。
縦横比の違う画像を並べる時に横幅基準や高さ基準にしてしまうと、画像の面積がまちまちになり、画像の印象の優劣が出てしまうので面積を統一できます。
基準となるサイズを選んで、画像のサイズ（ピクセル）を入力すると結果が表示されます。
結果は倍率と画像のサイズ（ピクセル）として表示されます。
「いいね」ボタンが動かない？！
あまっこに「いいね」ボタンを付けたのだけど、なぜかちゃんと動かない。
一瞬追加された様に見えるが戻ってしまうという奇妙な動きをする。facebookにログインしてみてもいいねが反映されていない。
Like Buttonで再度ボタンを作成してみたが
「Only verified developers can be added as listed developers of this application.」
というアラートが現れて作成に失敗する。
「キャッシュを削除すると作成できる」という記事があったので試してみると問題無く作成できたが、再作成したコードでも動かない。調べてみると以前は動いていたマイリリースの「いいね」ボタンも動かなくなっている。
なんやかんやでURLリンターというツールを見つけて試してみるとmetaタグで画像ファイルを指定していたのだがローカルパスだったのが原因だったようだ。
以前は画像パスが間違えていても「いいね」できていたが最近は厳しくなったようだ。