Category Note

CSS3: A4サイズ(ISO 216規格)比率のスタイルを作成する

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4(ISO 216 A列)の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになります。 今回は、A4サイズ(ISO A列)を例に、可変する矩形を描画する方法をメモしておきます。 目次 A4サイズ(ISO 216規格)比率のスタイルを作成する まとめ A4サイズ(ISO 216規格)比率のスタイルを作成する CSS の矩形の比率は CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧 より用紙サイズの比率をパーセンテージに変換しています。 HTML CSS まとめ 実際の紙媒体の規格を、Web 上で再現する必要はあまりありませんが、印刷やPDF プレビューを行いたい場合、必須となるテクニックだと思います。 比率の部分をクラス化すれば、汎用的なスタイルを定義できますのでお役立てください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Terminal: zshrc エイリアスのメモ(Git コマンド編)

Terminal のシェルはずっと zsh を使用しています。 今回は、自分が zshrc で設定している Git コマンドをメモしておきます。 目次 zshrc エイリアスのメモ(Git コマンド編) まとめ zshrc エイリアスのメモ(Git コマンド編) git pull と git push がどうしても紛らわしくなってしまいますが、ずっとこの設定でやり過ごしています(笑) まとめ エディタや IDE 等の設定を自分流にカスタマイズしすぎるのは良くない気がしますが、シェルだけは別だと都合よく考えることにしています。 zshrc 自体を公開している方もいらっしゃいますが、自分の場合、あまり使わない設定やコメントアウトが多く雑多になっていたため、今回は Git コマンドのエイリアスのみを公開しました。 ある程度 zshrc の内容が落ち着いてきたら、丸ごと zshrc をさらけ出したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: div, section, article の使い分け方

今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。 目次 div, section, article の使い分け方 まとめ div, section, article の使い分け方 最初に言っておくと、HTML5 で登場した article や section をわざわざ使用しなくても div だけを使っても問題ない です。 このことを前提として、以下に詳細を説明します。 div div を使うケースの多くは レイアウトやビジュアルデザインが主な利用用途 になっているかと思います。 div タグ自体に文章構造上の意味がないため、冒頭で説明した div だけを使ったコーディングで問題ない という結論になるわけです。 div 自体に意味はないため section や article を内包しても問題ありません。 section section は div と違い、文脈的な意味がある コンテンツに対し使用します。 また、section 内には hx(h1) が必須 となり、コンテンツが独立して成立しない 場合に用います。 section 内には、section もしくは article を配置できます。 article article は section 同様、文脈的な意味がある コンテンツに対し行います。 section との違いは article 内のコンテンツが 独立して成立する 場合に用います。 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。 各 article 内に section を内包(ネスト)することもできます。 div -> section -> article という順番で、よりセマンティックになっていく感じです。 まとめ HTML5 から登場した section と article ですが、WordPress 等のブログエンジンやテンプレートエンジン等で、あらかじめ設定済みのものをそのまま使うケースが多いです。 実際のところコンテンツをグルーピングしたい場合、div を使用すれば何も問題はないのですが、今はユニバーサルデザインを意識し開発することも求められますので、section や article を使い分け、各コンテンツの意味を考えながらコーディングしていくことも重要だと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Terminal: npm コマンド一覧

Web アプリ開発時に Node.js は欠かすことができない存在となりました。 今回は Node.js のパッケージ管理ツール である npm(Node Package Manager)のよく使うコマンドをメモしておきます。 目次 npm コマンド一覧 まとめ npm コマンド一覧 npm のバージョン npm のバージョンを表示します。 npm の初期化 カレントディレクトリに package.json を生成します。 パッケージのインストール パッケージ(XXX)をインストールします。 パッケージ(XXX)をインストールし package.json の dependencies に追記します。 –save は package.json の dependencies に追記される。 –save-dev は package.json の devDependencies に追記される。 –save-optional は package.json の optionalDependencies に追記される。 パッケージの更新 package.json に記載されたパッケージを一括インストールする際にも使用します。 パッケージの一覧を表示 インストール済みのパッケージ一覧を表示します。 パッケージの詳細を表示 パッケージ(XXX)の詳細情報を表示します。 パッケージを検索 パッケージ(XXX)を検索します。 パッケージの削除 パッケージ(XXX)を削除します。 未使用パッケージの削除 未使用のパッケージを削除します。 まとめ 近年、npm は Webアプリ開発の新規プロジェクトに着手する際、必ず利用します。 現在は様々な Node.js のパッケージが存在しますので、うまく利用すれば、最短で目標が達成できるようになるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image

Apple: iPhone X にソフトウェアホームボタンを追加する

iPhone X 発売日に iPhone X 開封〜おすすめ設定とファーストインプレション で ホームボタンはあった方がいい と述べました。 iPhone X を使用し3週間以上が経過し、ホームボタンがないことには慣れましたが、今もこの考えに変わりはありません。 今回は iOS の機能で、擬似的にソフトウェアホームボタンを再現する方法を説明します。 目次 iPhone X にソフトウェアホームボタンを追加する まとめ iPhone X にソフトウェアホームボタンを追加する 設定App より 一般 -> アクセシビリティ -> AssistiveTouch を選択し、AssistiveTouch を ON にします。 下記画像では、カスタムオプションの 3D Touch に ホーム を設定しています。 3D Touch にすることで、うっかり AssistiveTouch のボタンをタップしてしまった誤作動を回避することができます。 まとめ AssistiveTouch のボタンの位置は起動しているアプリの UI に影響を受け、自動的に位置が変更されてしまいます。 根本的な解決にはなりませんので、iOS アップデートでホームボタン復活を祈るばかりです。 しかしながら、iPhone X の全画面、FaceID 認証には非常に満足しており、最高のデバイスであることに変わりはありません。 もし、iPhone SE の全画面版がリリースされ、販売価格が10万円前後であれば、サイズ的にホームボタンがなくても操作に支障が少ないので、爆発的に売れるのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple: iFixit の iPhone X 分解画像の壁紙(修正版)

iFixit の iPhone X の分解 時の画像を利用した iPhone X 用の壁紙が話題になっています。 この壁紙はすごく気に入っているのですが、iPhone X のスーパー Retina ディスプレイが精彩過ぎて、撮影時のホコリが非常に目立ちます。 今回は、上記画像を壁紙として最適化したものを掲載したいと思います。 目次 iFixit の iPhone X 分解画像の壁紙(修正版) まとめ iFixit の iPhone X 分解画像の壁紙(修正版) 画像の修正内容の詳細は 均一なライティグとなるよう画像全体のコントラスト補正 傷、ホコリを除去 画像フチにブラック領域追加 ジャギー除去 を行い、壁紙画像として最適化しました。 以下がその画像となります。iPhone X でこのページへアクセスし、アルバムに画像を保存後、壁紙としてお使いください。 以下は上記画像をロック画面の壁紙として設定した iPhone X サンプル(カバーは純正レザーカバーのトープ)です。 まとめ iPhone に限らず、Apple 製品の中身は外見に引けを取らないくらい美しく設計されていて、その流れから今回 iPhone X の分解画像の壁紙を紹介しました。 最後にちゃぶ台返しのような発言となりますが、iPhone X の壁紙として最も適切なものは「ただのブラックのプレーン画像」だと思います。 その理由は、iPhone X のスーパー Retina ディスプレイ(OLED)はブラックが本当のブラックのため、背景がブラックだと、何もない中にアイコンや文字が浮き出た感じになり、シンプル過ぎてすごくインパクトがある ためです。 あくまで個人的な見解ですので、お好きな画像を色々壁紙に設定し楽しめばいいかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: Bootstrap で「印刷する」ボタンを設置する

Web ブラウザで印刷を行う場合、JavaScript で簡単に実現することができます。 今回は Bootstrap ボタンで「印刷」ボタンを設置する方法をメモしておきます。 目次 Bootstrap で「印刷する」ボタンを設置する まとめ Bootstrap で「印刷する」ボタンを設置する JavaScript の print() を実行するだけでブラウザの「印刷」プレビューを呼び出すことができます。 まとめ ペーパーレスの時代ですので、印刷ボタンがある Web サービスはあまり見かけませんが、メディアクエリの print と併用することで、業務管理系のサービス等に活用できるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple: iPhone X 開封〜おすすめ設定とファーストインプレション

iPhone X を発売日にゲットしました。 Apple によれば iPhone X は2年先の技術を先取りしているらしいですが、言いかえれば、iPhone 開発という時計の針を2年進めたともいえます。 発売日前には価格が 140,000円強(256GBモデル・税込)のデバイスということもあり、ネガティブな意見も多くみられましたが、蓋を開けてみると銀座や表参道の Apple Store に例年以上の行列が発生するほどの人気ぶりでした。 今回は購入後のセットアップから、週末にかけて iPhone X を実際に使用し、個人的に感じた良いところ、悪いところがありましたので、そのことを記事にしたいと思います。 目次 開封 ガラスフィルム 純正ケース セットアップ おすすめ設定 ホームボタン廃止について まとめ 開封 いつも通りの箱です。 箱を開けると Designed by Apple in California のリーフレット。 リーフレットを取ると iPhone X が配置されています。リーフレットはサプライズ感の演出と、本体前面の緩衝材の役割を果たしています。 Lightning EarPods と Lightning ケーブル、充電アダプタが付属しています。 ガラスフィルム 今回使用したガラスフィルムは以下の商品です。 Nimaso iPhoneX 用 強化ガラス液晶保護フィルム 【日本製素材旭硝子製】ガイド枠付き ガラスフィルムが2枚セットにも関わらず、1,000円程度のリーズナブルな価格で、ガイド枠もついているため、だれでもキッチリとど真ん中に貼ることができます。 ガラスフィルムの縁はラウンドカットされており、エッジスワイプ時にも引っかかりなく滑らかな使用感です。 2枚セットのため、いざという時の貼り替えにも対応できるのでオススメです。 今回もお馴染みのスペースグレイを選択しました。 ステンレス部分は物理蒸着によりグレイになっていますが、個人的にはここはシルバーモデル同様のステンレスシルバーでよかったように思います。 iPhone 6s Plus との比較。やはり Plus は自分には大きすぎました。 iPhone X の方が見てわかるくらい厚みがありますが、これまでが薄すぎたとも思えます。 今回使用したガラスフィルム 【2枚セット】Nimaso iPhoneX 用 強化ガラス液晶保護フィルム 【日本製素材旭硝子製】ガイド枠付き/3D Touch対応/業界最高硬度9H/透過率99.9% ( iPhone X 用, 2枚セット ) 純正ケース 今回もケースは Apple 純正のレザーケースに決めてました。色は「サドルブラウン」と迷いましたが、事前に Apple Store でチェックし気になっていた「トープ」を選択しました。 派手さもなく落ち着いた色合いです。特に女性が好む色合いではないでしょうか。 これまでの iPhone よりやや厚みがありますが、純正のフィット感とレザーのグリップ力、触感は値段相応の満足感があります。 今回のレザーケースでは、メタルボタンを採用しているため、見た目だけでなく使用感も飛躍的に向上しています。 iPhone X や iPhone 8 は背面もガラスなので、そのまま使うようにするか、ある程度クッション性のあるケースを装着するかの2択しかないと思います。 背面レンズの出っ張りはフラットになりそうもないので、純正ケースを装着することでデザインが完成するように感じます。 セットアップ セットアップはいたって簡単です。 iPhone X と iPhone 6s Plus を同じ Wi-Fi ネットワークに接続すれば、カメラによる画像認証により移行ウイザートが実行されます。 数分で iPhone 6s Plus の設定や環境が iPhone X に再現されます。 おすすめ設定 設定に関しては人それぞれの利用環境にあわせて行えばいいと思いますが、iPhone X においては必須と思える設定を紹介します。 上記設定はデフォルトではオフとなっており、この設定をオンにすることで、スクリーンの下部を下にエッジスワイプすることで画面が下にさがり、右上から下スワイプのコントロールセンターが片手で起動できるようになります。 ホームボタン廃止について iPhone X で大きな変化のうちの一つがホームボタンの廃止だと思います。 結論から申しますと、ホームボタンはあった方がいいと思います。 1時間もすれば、画面下部からの上スワイプジェスチャーによるホームアクションには慣れます。 しかし、従来のコントロールセンターへのアクセスがホームアクションになったことにより、コントロールセンターへのアクセスが困難(右上からのスワイプ)になりました。 ホームボタンが物理的である必要はありませんが、いずれ iPhone のモデル全てが全画面となるとき、ソフトウェアでホームボタンを復活させたほうが、全体的な UX は向上するように思いました。 まとめ iPhone X に価格に見合うだけの価値があるかとイエスです。 「Face ID」「全画面ディスプレイ」「OLED(有機ELディスプレイ)」と、この3つを実現するだけでも相応のコストがかかりますし、数年前から噂されていた「ガラス強化」「ステンレスフレーム」採用による強度の向上、事実上の「防水仕様」となり、「デュアルレンズに手ぶれ補正」「Qi規格採用」と、これでもかというほどの技術を投入したにも関わらず、最終的にはいつも使っている iPhone になってしまっています。 ユーザーが iPhone を始めとするスマートフォンに求める技術的要求は、年々少なくなっているのも事実ですが、10年前に不可能だったことを、当たり前に使えていることを忘れてはいけないと思います。 今回、iPhone 6s Plus から iPhone X へ、2年ぶりの機種変更を行いました。 もともと iPhone 6s Plus に関して不満はありませんでしたが、iPhone X に変えることで、使用時のストレスが明らかに軽減されていて、その理由はおそらく Face ID による UX の影響が大きいのではないかと感じています。 iPhone X は総合的にみて 多少無理をしても利用する価値はある と思いますので、現在買い替え時期に差し掛かっている方は是非ともご検討してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: 印刷時にページ番号を出力する

Web サイトをプリンタや PDF 出力する際、ページ番号を出力する CSS をメモしておきます。 目次 印刷時にページ番号を出力する まとめ 印刷時にページ番号を出力する 以下は page クラスの要素に対し、右下に「1 ページ」、「2 ページ」… と出力するサンプルとなります。 HTML CSS まとめ Web プログラムで動的なページネーション出力と組み合わせて、プリント出力にも対応した UI,UX を実現可能です。 ペーパーレスの時代ですが、ページ番号出力等といった一手間を加えることで、展開する Web サービスの信頼性をより多く獲得できるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから