Category Note

Update!

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

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で共有していただければ幸いです。
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(金) 発表日は週初〜半ば頃、予約開始は発表日の週末金曜日、発売日は予約開始から1週間後、という傾向があることがわかります。 まとめ 近年、新型 iPhone の新しい機能に関する情報のコメント欄の内容の多くは次のようなものです。 ・新機能はいいから安く or 高いので買わない ・バッテリーの容量を増やして欲しい ・Android に乗り変えました… こういったコメントは特に日本国内において顕著ですが、情報の内容に則したディベートが行える、情報リテラシーのあるユーザーが増えれば、iPhone 発表の場は楽しくなるのではないでしょうか。 ちなみに来月発表予定の iPhone は、高価にもかかわらず、かなり売れ年内は品薄続きになると思っています。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

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

CSS3: 擬似クラス not で複数要素を指定する

今回は CSS でスタイルを効かせたくない要素が指定できる擬似クラス、not を複数指定する方法をメモしておきます。 目次 擬似クラス not で複数要素を指定する まとめ 擬似クラス not で複数要素を指定する 下記 HTML で、box1, box3 クラスに対してフォントカラー赤の指定を除外します。 HTML CSS まとめ 参考までに、擬似要素、擬似クラスの違いもメモしておきます。 ::before, ::after, ::first-letter, ::first-line, ::selection は要素の一部に影響を与えるため、擬似要素となります。 それ以外の :link, :visited, :hover, :active, :first-child… は要素全体に影響を与えるため、擬似クラスとなります。 擬似要素はコロン2つ、擬似クラスはコロン1つから始まるので、記述を間違えないようにしましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 目次 Bootstrap 対応 iOS メディアクエリ(SCSS) まとめ Bootstrap 対応 iOS メディアクエリ (SCSS) 冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。 デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。 まとめ モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。 スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS: 擬似クラス before, after の解除方法

link, visited, active, hover 等、CSS 擬似クラスは多数存在します。 チームで制作を行っていると、フレームワークやベースのコードに、clearfix や装飾等の before, after 要素がコーディングされていて、不都合なときがあります。 今回は、before, after 擬似クラスを、拡張し解除する方法をメモしておきます。 目次 before, after の解除方法 まとめ before, after の解除方法 someclass の before 要素をカスケードで拡張し、解除(打ち消し)したい場合は以下のように記述します。 まとめ

Mac: Visual Studio Code の基本ショートカット一覧

現在 Visual Studio Code と Atom を併用しています。どちらも一長一短ありますが、後発の Visual Studio Code の方が、機能がシンプルにまとまっていて、使い勝手がいいように感じます。 今回はそんな Visual Studio Code の、よく使いそうな基本ショートカット一覧をメモしておきます。 目次 Visual Studio Code の基本ショートカット一覧 まとめ Visual Studio Code の基本ショートカット一覧 コマンド ショートカット コマンドパレット開く ⌘ + Shift + P サイドバー開閉 ⌘ + B 画面分割 ⌘ + \ 画面閉じる ⌘ + W 画面切り替え ⌘ + 数字キー 検索 ⌘ + F 置換 ⌘ + Shift + F 次を検索 ⌘ + G 前を検索 ⌘ + Shift + G インデント追加 Option + ] インデント削除 Option + [ カーソル行・上移動 Option + ↑ カーソル行・下移動 Option + ↓ カーソル行・上コピー Option + Shift + ↑ カーソル行・下コピー Option + Shift + ↓ Emmet Emmetコマンド + Tab Beautify Option + Shift + F マルチカーソル追加 Option + クリック マルチカーソル上追加 マウスで範囲選択後 ⌘ + Option + ↑ マルチカーソル下追加 マウスで範囲選択後 ⌘ + Option + ↓ ファイルの先頭に移動 Option + ↑ ファイルの末尾に移動 Option + ↓ ズームイン ⌘ + Shift + = ズームアウト ⌘ + Shift + – 新しいファイル ⌘ + N 保存 ⌘ + S 名前を付けて保存 ⌘ + Shift + S 設定 ⌘ + , まとめ ノート・デスクトップPC の需要が減りつつある中、ここ最近の Microsoft の意欲的なチャレンジには好感が持てます。 Atom は決して悪いエディタではありませんが、もう少し様子をみて、Visual Studio Code への乗り換えも検討したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

img_sqn_00

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

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