画像サイズを入力するとアスペクト比を計算するツールを公開しました。
アスペクト比計算ツール
以前書いた記事(アスペクト比の求め方やiframeのレスポンシブ対応)をいつでも使えるようにと思って制作しました。
使い方
使い方は至って簡単で、画像の横幅と縦幅を入力して計算ボタンを押すだけです。
普段よく使われるサイズに関してはプリセットを用意しているので選択すれば自動で入力フィールドに値が入ります。
対応ブラウザ
モダンブラウザとiOS、android対応。
IE 11/Edgeは未検証ですが動くはず。
androidの場合はアドレスバー部分の色が変わる仕様。
問題点・改善点の報告
機能の要望やバグなどはGitHubのIsuueで受け付けています。
あまり多機能にする予定はないのですが気軽に提案してください。
せっかくの技術ブログなので、宣伝だけでなく技術に関する事を紹介します。
フレームワーク
JavaScriptフレームワークとしてVue.jsを利用。
Google Adsense部分に関してはGoogle Adsense for Vue(vue-adsense)というvue.js用のサードパーティーを使って広告を表示。
ただし、npmでvue-adsenseをインストールするとwebpackでcommonjsとしてコンパイルする際にmodule.exportsエラーがでるためGitHubからファイルをダウンロードして使う必要あり(最新コミットにバージョンタグが振られてないからだと思われる)
環境構築
ベースとなる制作環境はオリジナルフレームワークとして構築している。
また、アスペクト比計算ツールのソースコードはGitHubで公開している。
ビルドツール
使用言語(altJS等)
制作コンセプト
ツールを制作するにあたってただつくるだけでなく、幾つかのコンセプトを元に作成しました。
単純明快
機能が多いと便利だと思いがちだが、初見の人にとっては逆に何をしたらいいのかわからなくなるので、縦横の画像サイズを入力するだけという迷わない設計にした。
ユーザビリティ
エンドユーザーが利用する際にストレスを感じる原因となる仕組みを軽減。
計算ボタンの有効・非有効
横幅・縦幅に数値が入力されているときだけボタンを有効化。
placeholderの工夫
placeholderは例として便利だがフォーカス時や入力時には消えてしまうため、時間が経つと何を入力したらいいのかわからなくなることもしばしば。
解決するためにフォーカス時や入力済みの場合は左上に存在するような設計にした。
全角数字を半角数字に変更
たまに誤って数字を全角で入力することがあるので、全角数字で入力しても半角数字に自動変換するようにした。
入力エラー
数字以外を入力するとエラーだと分かるように赤枠赤背景になるように設計。
※リリース時の現バージョンはフォーカスしているとわかりづらいので改善予定
ハマった点
制作をしていると様々な問題にぶつかるのでそれを共有。
iOSでコードエリアの横幅が思い通りにならない
<pre>と<code>で囲んでいるコードエリアは領域を超えると横スクロールするようにしているが、iOSだけ横幅が端末サイズを超えてしまうため、全体が横スクロールされてしまう。
現在も解決策が見つからないため、モバイルのみ横スクロールさせていない。
iOSは10からviewportの指定にかかわらず拡大縮小ができるためそれらの影響があるのかも？
また、全体をdisplay:gridにしているため、それらも影響している可能性あり。
※現在も調査中
column-gapのバグ
grid layoutのcolumn-gapにパーセントを指定するとsafariで無視されるバグがあった。
当初、コードエリアでもgird layoutにしていたが、指定の仕方に問題があったのかもしれないので、コードエリアに関してはgrid layoutをやめた。
Google Adsenseで横スクロール
Google Adsenseを導入してレスポンシブ広告にしているとpaddingを含んだ計算をAdsense側で行なって位置調整をしているため、ブラウザサイズによっては横スクロールが出る。
max-widthをpaddingを含んだサイズにしてpadding分をネガティブマージンで調整してなんとかクリアした。