Category Note

New!

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

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

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

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

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

CSS3: Bootstrap 4 Beta でグリッドレイアウトの offset クラスがなくなる

Bootstrap 4 Alpha から Beta の仕様変更で、グリッドレイアウトの offset クラスがなくなりました。 今回は、Bootstrap 4 Beta での offset の代わりとなる、auto の使い方をメモしておきます。 目次 Bootstrap 4 Beta グリッドレイアウト auto の使い方 まとめ Bootstrap 4 Beta グリッドレイアウト auto の使い方 Bootstrap 4 Alpha 以前に採用されていた offset-x(x は数値) クラスを、ml-auto、もしくは mr-auto に変更することで対応します。 HTML カラムの左側が空白の場合 ml-auto を、カラムの右側が空白の場合 mr-auto を設定すれば、自動的にオフセット値が計算され、スペースが確保されます。 まとめ Bootstrap4 Beta は正式リリースに限りなく近いものとなっているはずです。 現在 Bootstrap3 を利用している方は、そろそろ Bootstrap4 へリプレースを行なってもよいかもしれません。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Apple: iPhone 発表・発売スケジュール一覧(2017年度版)

新しい iPhone の発表まで1ヶ月を切りましたので、これまでの iPhone 発表、発売スケジュールを一覧にしました。 iPhone の発表・発売日を予想するためにご活用ください。 目次 iPhone 発表・発売スケジュール一覧 まとめ iPhone 発表・発売スケジュール一覧 日時は米国時間、初代 iPhone は日本で未発売、iPhone 3G は予約なしのため、iPhone 3GS からの一覧となります。 年度 機種 告知 発表 予約開始 発売 2009 iPhone 3GS 3/26(木) 6/9(火) 6/23(火) 6/26(金) 2010 iPhone 4 4/28(水) 6/7(月) 6/15(火) 6/24(木) 2011 iPhone 4S 9/27(火) 10/5(水) 10/7(金) 10/14(金) 2012 iPhone 5 9/5(水) 9/12(水) 9/14(金) 9/21(金) 2013 iPhone 5s/5c 9/4(水) 9/10(火) 9/13(金) 9/20(金) 2014 iPhone 6/Plus 8/29(金) 9/9(火) 9/12(金) 9/19(金) 2015 iPhone 6s 8/28(金) 9/9(火) 9/12(土) 9/25(金) 2016 iPhone SE 3/11(金) 3/21(火) 3/24(木) 3/31(金) 2016 iPhone 7 8/30(月) 9/7(木) 9/9(金) 9/16(金) 2017 iPhone 8 8/31(木) 9/12(火) 9/15(金) 9/22(金) 2017 iPhone X 8/31(木) 9/12(火) 10/27(金) 11/3(金) 発表日は週初〜半ば頃、予約開始は発表日の週末金曜日、発売日は予約開始から1週間後、という傾向があることがわかります。 まとめ 近年、新型 iPhone の新しい機能に関する情報のコメント欄の内容の多くは次のようなものです。 ・新機能はいいから安く or 高いので買わない ・バッテリーの容量を増やして欲しい ・Android に乗り変えました… こういったコメントは特に日本国内において顕著ですが、情報の内容に則したディベートが行える、情報リテラシーのあるユーザーが増えれば、iPhone 発表の場は楽しくなるのではないでしょうか。 ちなみに来月発表予定の iPhone は、高価にもかかわらず、かなり売れ年内は品薄続きになると思っています。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image

CSS: Mac 環境で CSS プリントのデバッグを行う方法

Web サイトやアプリ開発において、プリンタ出力時のスタイルを定義する必要がある要件もあるかと思います。 Mac の場合、デフォルトブラウザが Safari ですが、残念ながら Safari の Web インスペクタにプリントデバッグの機能はありません。 したがって、今回は Mac 版 Chrome を使用し、プリントのスタイルを確認する方法を説明したいと思います。 目次 CSS プリントのデバッグを行う方法 まとめ CSS プリントのデバッグを行う方法 Chrome が未インストールの方は Chrome 公式サイトから ダウンロード します。 Chrome のメインメニューより 表示 -> 開発/管理 -> デベロッパーツール を起動します。 デベロッパーツールの下部ペインの Rendering タブ の下の方にある Emulate CSS media より print を選択すれば 印刷用CSS での出力が確認できます。 まとめ Safari は Mac や iOS デバイスのデバッグに適した Web インスペクタ が用意されていますが、Web 開発のデバッグ時には Chrome のように軽快に動作しない場面も少なからずあります。 iOS アプリ開発時の Safari の Web インスペクタによるデバッグはとても使いやすいので、次期 macOS で改善されればいいのですが。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

img_sqn_00

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

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