Category Note

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

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

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

img_sqn_00

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

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