Yearly Archives: 2017

New!

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で共有していただければ幸いです。
Update!

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
Update!

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で共有していただければ幸いです。
Update!

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で共有していただければ幸いです。

CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧

Web をプリンタで出力する際、用紙は A4,B5 等の用紙を利用するかと思います。 今回は 各種 A,B(ISO 216規格)を dpi(ピクセル)に換算した一覧をメモしておきます。 目次 A列(ISO 216) B列(ISO 216) まとめ A列(ISO 216) 72dpi 144dpi 200dpi 300dpi 360dpi 400dpi 600dpi A 0  1189 × 841 3370 2384 6741 4768 9362  6622 14043 9933 16852 11920 18724 13244 28087 19866 A 1  841 × 594 2384 1684 4768 3368 6622 4677 9933 7016 11920 8419 13244 9354 19866 14031 A 2  594 × 420 1684 1191 3368 2381 4677 3307 7016 4961 8419 5953 9354 6614 14031 9921 A 3  420 × 297 1191 842 2381 1684 3307 2339 4961 3508 5953 4209 6614 4677 9921 7016 A 4  297 × 210 847 595 1684 1191 2339 1654 3508 2480 4209 2976 4677 3307 7016 4961 A 5  210 × 148 595 420 1191 839 1654 1165 2480 1748 2976 2098 3307 2331 4961 3496 A 6  148 × 105 420 298 839 595 1165 827 1748 1240 2098 1488 2331 1654 3496 2480 A 7  105 × 74 268 210 595 420 827 583 1240 874 1488 1049 1654 1165 2480 1748 ※A サイズの単位は mm、dpi の単位は ピクセル px B列(JIS) 用紙種類↓・ dpi → 72dpi 144dpi 200dpi 300dpi 360dpi 400dpi 600dpi B 0  1456 × 1030 4127… 続きを読む
eyecatch_image

Win: WSL (Windows Subsystem for Linux) を準備する

Windows で Bash (Bash on Ubuntu on WIndows) が使えるようになりました。 今回は Windows 10 で Bash を使えるようにするための、WSL (Windows Subsystem for Linux) を準備するメモしておきます。 目次 WSL (Windows Subsystem for Linux) を準備する まとめ WSL (Windows Subsystem for Linux) を準備する 開発者モードの有効化 Windows スタートメニュー の 設定 から 更新とセキュリティ を選び、左側の 開発者向け タブを選択 開発者モードを有効化 します。(選択後、関連ファイルのダウンロードに少々時間がかかります) WSL のインストール 管理者モード(右クリックから選択)で PowerShell ウィンドウ を起動 し以下を実行 再起動後、[スタート]メニューから Bash on Ubuntu on Windows が実行できるようになります。 まとめ WSL の登場で Windows 環境での Webアプリ等の開発も可能になってしまいました。 しかし iOS アプリは Mac でなければ開発できませんので、Apple は今以上に Mac による開発環境の強化を進めてもらいたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

iOS: iOS 11 のメモ帳に追加された新機能

iOS アップデートごとに強化されていくメモ帳ですが、iOS 11 から更に便利な機能が強化されました。 今回は、iOS 11 で追加されたメモ帳の新機能についての説明をしたいと思います。 目次 表を作成する メモ帳から直接画像をスキャンし添付する まとめ 表を作成する 表作成アイコンをタップ 行(列)を追加 行を追加する場合は、表の左端の … をタップし、行を追加 を選択します。 列の追加も行と同様簡単に行えます。 メモ帳から直接画像をスキャンし添付する 続いてメモ帳から直接画像をスキャンし添付してみます。 画像追加アイコンをタップ 書類をスキャンを選択 カメラ起動 自動でカメラが起動し、矩形が表示されます。 そのままデバイスをキープするか、撮影ボタンをタップすれば自動的にキャプチャ後、台形補正が実行されます。 キャプチャ完了 わずか2タップでメモ帳に画像キャプチャが添付されました。便利ですね。 まとめ 今回は iPhone の画面で説明しましたが、iPad のメモ帳も同様の操作で表や書類がスキャンできます。 また、macOS と iOS の連携も成熟していますので、Apple のデフォルトアプリのみで、スケジュールやタスク管理がほぼ完結してしまいます。 便利な反面、アプリデベロッパーは、これまで以上に独創的なアイデアやアプローチによる開発が求められるようになりますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。