Yearly Archives: 2017

eyecatch_image
New!

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

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

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

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

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

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

Mac: iTunes Match でアルバムアートワークが反映されないときの解決方法

iTunes で大量の音楽データを管理している場合、iTunes Match を利用している方も多いかと思います。 そんな iTunes Match ですが、Mac で取り込んだアルバムのアートワークが iOS デバイスに反映されないときがあります。 本日は、iTunes Match のアルバムアートワークが反映されない場合の対処方法を説明したいと思います。 目次 iTunes Match でアルバムアートワークを更新する まとめ iTunes Match でアルバムアートワークを更新する 初回アップロード時にアルバムアートワークが反映されなかった場合、該当アルバムのアートワークをいくら更新しても、iOS デバイス上では変更が反映されません。 以下の方法でアルバムアートワークを再度アップロードし、クラウド上のデータを更新することで解決します。 アルバムの情報を見る アートワークが反映されていないアルバムを選択し、右クリック -> 情報を見る(もしくは ⌘ + i)を選択します。 アルバムアートワークを追加 既存のアートワークは削除せず、アルバムアートワークを追加し、OK します。 元のアルバムアートワークを削除 再度アルバムを選択し、右クリック -> 情報を見る(もしくは ⌘ + i)を選択し、既存アートワークを削除し、OK します。 少し時間をおいて、iOS デバイス上のアルバムアートワークが更新されていれば完了です。 まとめ iOS デバイスで初回アルバムアートワークが反映されなかった場合、「iCloud ミュージックライブラリをアップデート」を試しても、いつまでたっても更新されない可能性が高いです。 そういった場合は、今回の方法でアートワークそのものを再度アップロードすれば解決します。お試しください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: div 等のブロック要素を width にあわせたアスペクト比にする

img タグは width、height を % 指定することで、アスペクト比によるサイズ指定が簡単に行えます。 一方 div 要素に対し、width 100% のアスペクト比による height を記述しようとすると、なかなか意図した結果にならないと思います。 今回は可変する width に対し、アスペクト比による高さを指定する方法を説明したいと思います。 目次 ブロック要素を width にあわせたアスペクト比にする まとめ ブロック要素を width にあわせたアスペクト比にする ここでは、width 100% に対し、正方形(height 100%)の div を作成します。 HTML ネストになる div を作成します。 CSS 外側の div (aspect-container) の before 要素の padding-top を 100% とすることで、width 100% に対して 100% の高さを確保します。 まとめ アスペクト比を維持したまま、ウインドウサイズや親要素の width に応じて、子ブロック要素の height を変えたい場合に有効な方法です。 今回は正方形を例にしましたが、before の padding-top の比率 を変更することで、任意のアスペクト比への対応も可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript: イベントバブリングによる親要素のイベント実行を停止する

親要素に設定されているクリックイベントにより、リンクやボタン等のクリックイベントが実行されない、先に親要素のイベントが発火してしまう、という問題があります。 今回は、イベントが設定されているネストされた要素の、親要素に設定されているイベントを停止する方法を説明します。 目次 イベントバブリングで親要素のイベント実行を停止する まとめ イベントバブリングで親要素のイベント実行を停止する 通常、イベント発生時には DOM ツリーのルート (Window) からイベント発生要素を探索(キャプチャ)し、発生要素を特定(ターゲット)後、再びルート (Window) まで遡り(バブリング)ます。 以下のサンプルでは、外側 div (#wrapper)、内側 div (#content) 両方にクリックイベントが設定されています。 サンプル HTML function divClick 内の e.stopPropagation() により、内側要素 (div#content) クリック時、そこでイベントバブリングが停止し、親要素 (div#wrapper) のクリックイベントは無効となります。 まとめ このように、JavaScript のイベントバブリングをコントロールすることで、ネストされた要素(外側)のイベントを停止したり、優先順位を思いどおりに設定が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: クラス・id 名に特定文字列を含む要素を指定する方法

CSS クラス・id 名に規則性があれば正規表現を利用し、特定文字列を対象としたスタイル指定が有効です。 今回は、クラス・id 名に 特定の文字が含まれる要素を指定 する記述方法を説明したいと思います。 目次 クラス・id 名に特定文字列を含む要素を指定する方法 まとめ クラス・id 名に特定文字列を含む要素を指定する方法 部分一致 クラス名に 「xxx- が含まれる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 前方一致 + 部分一致 クラス名の 「先頭が xxx- で始まる」 「div 要素」 の 「背景色に red」 を指定する記述は以下のようになります。 基本的に class^= の 前方一致 により目的は「ほぼ」達成されますが、 div 要素に対し 複数クラスが定義されているケースに対応 するため class*=” xxx-“ の記述(※要先頭半角スペース+文字列)が必須となります。 まとめ クラスや関数の命名規則に関しては、開発者全員がそれなりにコストをかけてしまう部分です。 それなりに場数を踏めば、既存フレームワークが採用するパターンへと近づいていくものですので、CSS においても最適な名称でコーディングをし、できるだけ少ない行数で、意図したスタイル指定ができるよう心がけましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5: area-hidden プロパティについて

aria-hidden プロパティ とは、WAI-ARIA の仕様で定義されている、テキスト読み上げの有無を設定する値です。 主にアイコンフォントのタグに指定するケースがほとんどだと思いますが、今回はこの area-hidden プロパティ についてのメモしておきます。 目次 area-hidden プロパティについて area-hidden プロパティについて 今回説明に使用する CSS フレームワークは Bootstrap、アイコンは自家製アイコンフォントの MellowGlyph を例にとって説明したいと思います。 装飾アイコンの場合 機能に関係なく、単なる装飾であるアイコンの場合、aria-hidden=”true” を設定することで、スクリーンリーダーに対して存在しないものと認識させることができる。 表意アイコンの場合 アイコンの意匠そのものに機能的な意味が含まれる場合、aria-hidden=”true” を設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 インタラクションアイコンの場合 アイコン自体がリンクになっていて、タッチやマウス等の入力デバイスによるインタラクションが発生する場合、aria-hidden=”true” と title プロパティ 設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。 まとめ アイコンのアクセシビリティを解決する方法として、タグを使用せずに ::before, ::after といった擬似要素で指定する方法があります。 ただし、この方法をとる場合は、定義された名前空間による直感的なコーディングが困難なため、タグで直接記述し、area-hidden プロパティ を適切に指定する方法が簡単かつ便利かと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。