Category Note

New!

HTML: よく使う特殊文字のコード一覧

HTML 上で、比較的利用する機会がある特殊文字(記号)のコードをリスト化しました。 WordPress 等で、動的に処理される HTML コンテンツに必要となるときもありますので、お役立て下さい。 目次 よく使う特殊文字コード まとめ よく使う特殊文字コード リテラルは「&」+「〜」+「;」となり、大文字、小文字は区別されます。 一覧にはありませんが、&alpha ; の場合、ギリシャ小文字の 「α」、&Alpha ; ではギリシャ大文字の「Α」となります。 文字 表記 意味 " &quot; quotation mark & &amp; ampersand < &lt; less-than > &gt; greater-than   &nbsp; no-break space ¥ &yen; yen © &copy; copyright ® &reg; registered ± &plusmn; plus-minus · &middot; middle dot Ø &Oslash; O-slash ÷ &dvide; divide ø &oslash o-slash α &alpha; alpha β &beta; beta γ &gamma; gamma δ &delta; delta π &pi; pi σ &sigma; sigma φ &phi; phi ω &omega; omega … &hellip; horizontal ellipsis ™ &trade; trade mark ← &larr; leftwards arrow ↑ &uarr; upwards arrow → &rarr; rightwards arrow ↓ &darr; downwards arrow ∴ &there4; therefore ≠ &ne; not equal ≡ &equiv; equivalent まとめ これらの特殊文字の表記は、呪文のようなものもいくつかありますが、それらは全て英単語の短縮形となっています。 一見遠回りに思えますが、英語本来の意味から表記コードを覚えれば、すんなりと記憶に定着し暗記が可能です。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
New!

Apple: iPad Pro 10.5 と iPad Pro 9.7 の違いについて

WWDC2017 での iPad Pro 10.5 の発表後、すぐに注文し、iPad Pro 9.7 から iPad Pro 10.5 へ買い替えました。 今回はディスコンとなった iPad Pro 9.7 ユーザーのために、iPad Pro 10.5 との違いと感想をメモしておきますので、買い換える必要があるかどうかの判断材料としてご活用ください。 目次 スペック比較表 所感 まとめ スペック比較表 スペックの比較表は以下の通りです。 iPad Pro 10.5 iPad Pro 9.7 発売日 2017年6月6日 2016年3月21日 OS iOS 10 iOS 9 CPU 64ビットアーキテクチャ A10X Fusion + 組込型 M10 コプロセッサ 64ビットアーキテクチャ A9X + 組込型 M9 コプロセッサ メモリ 4GB 2GB 容量 64GB、256GB、512GB 32GB、128GB、256GB ディスプレイ 10.5インチ(対角)LEDバックライトMulti-Touchディスプレイ 2,224 x 1,668ピクセル解像度 264ppi ProMotionテクノロジー 広色域ディスプレイ(P3) True Toneディスプレイ 耐指紋性撥油コーティング フルラミネーションディスプレイ 反射防止コーティング 9.7インチ(対角)LEDバックライトMulti-Touchディスプレイ 2,048 x 1,536ピクセル解像度 264ppi 広色域ディスプレイ(P3) True Toneディスプレイ 耐指紋性撥油コーティング フルラミネーションディスプレイ 反射防止コーティング リフレッシュレート 120Hz 60Hz Wi-Fi Wi-Fi(802.11a/b/g/n/ac)デュアルバンド(2.4GHz/5GHz)MIMO対応HT80 Wi-Fi(802.11a/b/g/n/ac)デュアルバンド(2.4GHz/5GHz)MIMO対応HT80 カメラ(フロント) 700万画素、HDビデオ撮影(1080p) 500万画素、HDビデオ撮影(720p) カメラ(バック) 1200万画素、4Kビデオ撮影 1200万画素、4Kビデオ撮影 センサー Touch ID、3軸ジャイロ、加速度センサー 気圧計、環境光センサー Touch ID、3軸ジャイロ、加速度センサー 気圧計、環境光センサー Bluetooth Bluetooth 4.2 Bluetooth 4.2 Touch ID 第2世代 第1世代 サイズ 250.6mm(縦)×174.1mm(横)×6.1mm(厚さ) 240mm(縦)×169.5mm(横)×6.1mm(厚さ) 重さ 469g(Wi-Fi)、477g(LTE) 437g(Wi-Fi)、444g(LTE) バッテリー 最大10時間 最大10時間 外部接続端子 USB3-Lightning USB2-Lightning カラー シルバー・ゴールド・スペースグレイ・ローズゴールド シルバー・ゴールド・スペースグレイ・ローズゴールド 所感 以下、主要な変更点についての所感をメモしておきます。 CPU CPU は 30%、 GPU は 40% 程度速くなってるそうですが、iPad Pro 9.7 と iPad Pro 10.5 で 違いはわかりません でした。どちらでもいいと思います。 メモリ メモリに関しては iPad Pro 9.7 の 2GB から iPad Pro 10.5 では 4GB へと倍になっています。現時点でその恩恵は感じられませんが、iOS11 でのマルチタスキング時に、違いが出てくると思います。 容量 256GB で十分 だと思いますが、大量のメディア、TV録画等をダウンロード保存し、ローカルで視聴したい方は 512GB あってもいいかと思います。 ディスプレイ 1インチに満たないサイズアップですが、それでも大きく感じます。12.9 インチは自分には大きすぎですが、10.5 インチは丁度いいサイズ だと実感しました。 リフレッシュレート Retina ディスプレイが発表された際、ここまでの解像度は必要ないだろうと思ったものの、慣れてしまうと戻れない体験であることはみなさんも経験済みだと思います。 今回のリフレッシュレートはそれと似た体験を与えてくれました。スクロール時の文字が、残像とならず「くっきり」しているため、目の疲れが明らかに軽減されています。 一見地味な変更であるリフレッシュレートのアップデートですが、はっきり言いますと これだけで買い換える意味は十分ある と思います。 Touch ID iPad Pro 9.7 の不満点の一つが Touch ID の反応の遅さでした。iPhone 6s 以降は Touch ID 2.0 となっているため、その違いが顕著に出てしまう結果となっていました。 ただ、iPad Pro 10.5 の Touch… 続きを読む
Update!

CSS3: Bootstrap4 グリッドレイアウトの概要メモ

Bootstrap はバージョンごとに時代に合わせ、グリッドレイアウト内部の仕様が変更されています。 今回は、Bootstrap のそのグリッドレイアウトについて、新しいバージョン 4 に対応したグリッドオプションのクラスをメモしておきます。 目次 グリッドオプション まとめ グリッドオプション Extra small (<576px) Small (≥576px) Medium (≥768px) Large(≥992px) Extra large(≥1200px) Grid behavior 常時水平レイアウト 折りたたまれた状態で開始、ブレークポイントで水平レイアウト .container の最大幅 None (auto) 540px 720px 960px 1140px プレフィックスクラス .col- .col-sm- .col-md- .col-lg- .col-xl- オフセットクラス .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl- カラム(列)の分割数 12 レイアウトの間隔 30px (各セルの両端 15px 間隔) まとめ 今回、サンプルコードを掲載したかったのですが、サイト構造の問題で BS4 でのコーディングができませんでした。。 みなさんもこういったことのないように、定期的にコードを見直し、時代に合わせてアップデートしていきましょう。 近々 DB を含めたサイトの再構築を行いたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: Bootstrap4 グリッドの offset が効かない場合の対処

Bootstrap でのグリッドレイアウト時、空白部分が発生する場合に col-xx-offset-x を利用すると思いますが、バージョン4では反映されなくなっています。 offset の概念がなくなったわけではなく、バージョン4 よりクラス名が変更されているだけですので、メモしておきます。 目次 Bootstrap グリッド offset について まとめ Bootstrap グリッド offset について 以下のようにクラス名が変更されています。 Bootstrap3 例)sm, offset 4 の場合のサンプル Bootstrap4 例)sm, offset 4 の場合のサンプル まとめ Bootrstrap4 では他にも色々なクラス名が変更されています。 Bootstrap は CSS フレームワークとしてはデファクトスタンダードですので、既存コードの対応が必要な方は早めに修正してくことをお勧めします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

JavaScript:プロトタイプチェーン詳解!prototype と __proto__ について

prototype や __proto__ それぞれを詳しく説明しているものは存在しますが、この2つの違いを明確にまとめている情報があまりありませんでした。 そこでプロトタイプベースとはどういうことなのか、コード上に登場する prototype や __proto__ とは一体何なのかを自分なりに整理してみました。 更新履歴 [2017.06.03] コンテンツ修正しました。sititou70様、ご指摘いただき有難うございました。 [2014.07.19] コンテンツ修正しました。通りすがり様、ご指摘いただき有難うございました。 プロトタイプ JavaScript は「プロトタイプベース」のオブジェクト指向言語です。 まず最初にこの「プロトタイプベース」のオブジェクト指向とはいったい何なのか、クラスベースのオブジェクト指向と比較してみました。 クラスベース オブジェクトの雛形として必ずクラスが存在し、クラスをインスタンス化することでオブジェクトが生成される。 プロトタイプベース オブジェクトは既存のオブジェクトを元(プロトタイプ)とし、ユニークな特徴を付加することで存在する。 JavaScript はクラスを定義しなくても、新しいオブジェクトを生成したときには、すでに別のオブジェクトを元に生成されているということなのですね。 そして、この元こそがプロトタイプであると言うことがわかります。 プロトタイプ と [[Prototype]] と prototype プロトタイプ は仕様上の 概念 であって、実装時に定義したり参照できるものではありません。その概念を [[Prototype]] 内部プロパティである prototype や __proto__ により実現されています。 よって、全てのオブジェクトは内部プロパティ[[Prototype]]を持つということになります。 prototypeとは JavaScript の function 式で生成されるオブジェクトには prototype というプロパティを持っています。これがプロトタイプの正体です。 全てのオブジェクトが持つプロパティfunction式で生成されるオブジェクトが持つプロパティ(※1) prototype プロパティには何らかのオブジェクトが格納されている ※1 [2014.07.13](修正) prototypeは関数が生成されるときに自動的に作られ、{constructor:ownFunction}が入れられるプロパティで、普通のオブジェクトは持ちません。 次のサンプルコードでは Sample という関数(コンストラクタ)を定義し、Sample の prototype へ a プロパティを定義し、そこへ文字列 a を代入しています。 サンプルコード 結果 Sample のインスタンスである sample_obj 生成し、インスタンスから a プロパティにアクセスすると、prototype で定義した a の値が暗黙の参照により出力されます。 prototype(プロトタイプ)まとめ プロトタイプは概念上の言葉で、 prototype というオブジェクトのプロパティにより実現されている。 プロトタイプチェーン JavaScript がオブジェクト指向言語でありながら、クラスベースの言語と比較して、オブジェクトの型を意識しなくても何となく動いてしまう理由は、インスタンスが暗黙の参照により、オブジェクトが持つプロパティ prototype 順に辿っていくためです。(※2)このことをプロトタイプチェーンと呼びます。 ※2 [2014.07.19](加筆) チェーンが辿るのは [[Prototype]] であり、親の prototype プロパティとは直接関係ありませんが、new演算子が親の prototype プロパティを子の [[Prototype]] に設定するようになっているため、全てのオブジェクトはどんな名前のプロパティであっても [[Prototype]] に適応され得ます。 プロトタイプチェーンについては以下のサンプルコードをみれば分かりやすいと思います。 サンプルコード 結果 SampleA という関数(コンストラクタ)を定義し、SampleA の prototype に対し a というプロパティを定義し、文字列 a を代入しています。 続いて SampleB を定義、その prototype に SampleA のインスタンスを代入します。 最後に SampleB のインスタンス sample を生成し、インスタンスから SampleA で定義した a プロパティにアクセスすると 文字列 a が出力されました。 この例ではプロトタイプチェーンにより、JavaScript でもクラスベース言語のように SampleB が SampleA を継承していることが分かります。 プロトタイプは次のような経路で探索していきます。 プロトタイプチェーンの経路 現在のインスタンスのプロパティを調べる インスタンス元のオブジェクトのプロトタイプを調べる(上位のオブジェクトがある場合は継承の頂点まで繰り返す) 継承ツリーの頂点 Object.prototype を調べる Object.prototype で見つからない場合は undefined を返す(※3) サンプルコードでは以下の順にプロトタイプの探索が行われています。 sample_obj の prototype にプロパティ a があるか調べる -> なし SampleB の prototype にプロパティ a があるか調べる -> なし SampleA の prototype にプロパティ a があるか調べる -> あり(探索終了) プロトタイプチェーンまとめ prototype に定義したプロパティは、インスタンスから暗黙の参照により、継承ツリーの頂点である Object.prototype までを順に探索する。(※3) ※3 [2014.07.19](加筆) チェーンの末端は Object.prototype と決まっているわけではなく、厳密に言えば [[Prototype]] が null のときに探索が終了します。 prototype と __proto__ ここまででプロトタイプが仕様上の概念であること、prototype は関数オブジェクトのもつプロパティであることは理解出来ました。 それでは一体 __proto__ とは何でしょうか。 __proto__とは 全てのオブジェクトが持つプロパティObject.prototypeから継承されるアクセサメソッド(※4) __proto__ の値が null になるまでプロパティを探索していく Object.prototype の… 続きを読む
Update!

Swift: guard と defer についての覚書

Swift2 より登場した guard と defer ですが、if 文に慣れすぎてなかなか使おうとせず、覚えられなかったので、勉強を兼ねてメモしておきます。 目次 guard defer guard defer サンプル まとめ guard 条件式が false の場合の処理を記述することができる。if の else 部分のみの構文。 defer スコープを抜け出す際に、実行される処理を定義できる。 guard defer サンプル ViewController.swift 実行結果 まとめ guard と defer のセットを適切に利用すれば、if 文よりモダンかつスマートに処理が記述できますね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

Swift: デザインパターン > 構造パターン > Flyweight

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Flyweight について説明します。 目次 [構造] Flyweight パターン まとめ [構造] Flyweight パターン Flyweight とは、フライ級という意味で、生成済みのインタンスを共有し、機能が重複する新規インスタンスの生成を防止し軽量化をおこなうパターン。 サンプルコード FlyweightFactory.swift FlyweightObject.swift ViewController.swift 実行結果 まとめ インタンスを共有するという意味において Flyweight は Singleton と似たデザインパターンですが、Singleton は1つのインスタンスを保持するのに対し、Flyweight はキーと値(オブジェクト)を1対1で保存するといった違いがあります。 次回は 振る舞いパターン の Interpreter パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: デザインパターン > 構造パターン > Facade

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Facade について説明します。 目次 [構造] Facade パターン まとめ [構造] Facade パターン Facadeとは、正面という意味で、複数クラスをまたぐような処理を隠蔽し、1つのクラス(Facade=正面)を提供し、利用者にシンプルなインターフェースを用意するパターン。 サンプルコード Facade.swift ViewController.swift 実行結果 まとめ UserDefault の値の出し入れを Facade クラスのみから行うことができました。 次回は 構造パターン の Flyweight パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 印刷時の改ページ部分をコントロールする

Web ページを印刷した時、プリント用の CSS が定義されていて、出力結果が綺麗な場合、そのサイトで扱っているコンテンツに対する信用は向上します。 今回はそんなプリント・PDF 出力時に、改行する位置を指定する CSS プロパティについてメモしておきます。 目次 印刷時の改ページ部分をコントロールする まとめ 印刷時の改ページ部分をコントロールする 改ページの CSS プロパティ説明の前に、header 内で print 専用の CSS を読み込みたい場合のサンプルコードを記載しておきます。 print.css を読み込むためのサンプルコード 改ページに関する CSS before 要素プロパティ プロパティ 値 説明 page-break-before auto 制御しない (初期値) always 直前で改ページさせる avoid 直前の改ページを禁止する 改ページに関する CSS after 要素プロパティ プロパティ 値 説明 page-break-after auto 制御しない (初期値) always 直後で改ページさせる avoid 直後の改ページを禁止する まとめ print.css もしくは @media print を使用し、HTML 要素に対し page-break-before もしくは page-break-after で改行位置を指定します。 プリント時のプレビューを確認しながら、区切りのいい位置で div や hr タグに対しこれらのスタイルを定義すれば、PDF 出力時にも適用されます。 普段は見過ごされてしまいがちな印刷時のスタイルを定義しておけば、Web コンテンツ自体の品質・信用の向上につながると思いますので、積極的に導入してみてください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: デザインパターン > 構造パターン > Decorator

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Decorator について説明します。 目次 [構造] Decorator パターン まとめ [構造] decorator パターン Decorator(装飾者)パターンは、既存オブジェクトに機能や振る舞いを動的に追加できるパターン。 サンプルコード Player.swift Component となるクラス。 Hero.swift ConcreteComponent となるクラス。 Decorator.swift Decorator クラスには Player (Component) インスタンスをメンバ変数として保持するのがポイント。 Sword.swift ConcreteDecorator となるクラス。 PowerStone.swift ConcreteDecorator となるクラス。 ViewController.swift 実行結果 まとめ 上記サンプルのように Decorator パターンを利用すれば、Hero クラスを継承することなく動的に機能拡張を行うことができます。 次回は 構造パターン の Facade パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

img_sqn_00

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

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