Category Note

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

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

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Composite について説明します。 目次 [構造] Composite パターン まとめ [構造] Composite パターン Composite とは合成、複合を意味し、Composite パターンでは再帰的な構造を表現し、階層構造で表現されるオブジェクトの取扱いを容易にする。 サンプルコード Branch.swift Leaf.swift ViewController.swift 実行結果 まとめ Branch クラスに Branch と Leaf クラスが属しています。 Branch と Leaf が execute により、Branch に Leaf や、別の Branch を含むことが可能になりました。 次回は 構造パターン の Decorator パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Bridge について説明します。 目次 [構造] Bridge パターン まとめ [構造] Bridge パターン クラスなどの実装と、呼出し側との橋渡し(Bridge)するクラスを用意し、実装と機能を分離することで、実装の変更や機能追加を容易にする。 サンプルコード AbstractColor.swift ConcreteWhiteColor.swift ConcreteBlackColor.swift ImplementWhiteColor.swift ImplementBlackColor.swift ViewController.swift 実行結果 まとめ AbstractColor という抽象クラスと protocol Implementor の Bridge(橋渡し)により、実装と機能が分離されています。 これにより、サブクラス(実装)を追加しても、その都度機能を実装する必要がなくなるため、プロジェクトのメンテナンス性が向上します。 次回は 構造パターン の Composite パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 構造パターン の Adapter について説明します。 目次 [構造] Adapter パターン まとめ [構造] Adapter パターン 互換性のないインタフェースを持つクラス同士に手を加えず、共通のインタフェースを提供する。 サンプルコード Adapter.swift Adaptee.swift ViewController.swift 実行結果 まとめ Objective-C や Swift でおなじみの protocol を利用し、Adaptee クラスを継承することで、Adapter クラスで requiredMethod を実装しています。 次回は 構造パターン の Bridge パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: デザインパターン > 生成パターン > Abstract Factory

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 前回は Factory Method パターンを説明しましたが、もう一つの Factory パターンである 生成パターン の Abstract Factory について説明します。 目次 Factory について [生成] Abstract Factory パターン まとめ Factory の概要 オブジェクトの 生成 と、オブジェクトの 実装 を 分離する するパターン。 プロダクトを発注する側は、工場内でどういった工程を経てプロダクトが完成するかを知らなくても、工場に対しプロダクトを要求すれば、プロダクトを受け取る事ができる。 この仕組みにより、プロダクト発注側はプロダクトの管理 に、工場側はプロダクトの生産工程 に集中できるようになる。 [生成] Abstract Factory パターン 複数の関連オブジェクトを、各具象クラス(ConcreteProduct)を明確にせず、オブジェクト生成の インタフェースのみを提供する。 Factory の原則と Factory Method パターンとの違い Factory の原則 オブジェクトを生成するとき、オブジェクトの生成のためのインタフェースを提供し、インスタンス化するクラスを決定する役割はサブクラスで行う。 Factory Method パターン オブジェクトを生成するとき、オブジェクトの生成のためのインタフェースを提供し、インスタンス化するクラスを決定する役割はサブクラスで行う。 Abstract Factory パターン オブジェクトを生成するとき、具体的なクラスを明確にせず(カプセル化)、生成のためのインタフェースを提供する。 パターンの概要 Product Protocol により抽象的に生成オブジェクト ConcreteProduct のインタフェースを決定する。 ConcreteProductA, B 具体的な Product を決定する。 サンプルコード ConcreteProductA.swift ConcreteProductB.swift ViewController.swift 実行結果 まとめ Abstract Factory パターンにより、具象オブジェクトの実装を気にすることなく、オブジェクトの生成と生成したオブジェクトの利用に専念できるようになり、コードのメンテナンス性が向上しました。 次回は 構造パターン の Adapter パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: デザインパターン > 生成パターン > Factory Method

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 生成パターン の Factory Method について説明します。 目次 Factory の概要 [生成] Factory Method パターン まとめ Factory の概要 オブジェクトの 生成 と、オブジェクトの 実装 を 分離する するパターン。 プロダクトを発注する側は、工場内でどういった工程を経てプロダクトが完成するかを知らなくても、工場に対しプロダクトを要求すれば、プロダクトを受け取る事ができる。 この仕組みにより、プロダクト発注側はプロダクトの管理 に、工場側はプロダクトの生産工程 に集中できるようになる。 [生成] Factory Method パターン オブジェクトの生成のインタフェースを提供し、インスタンス化するクラスを決定するのはサブクラスで行う。 Factory の原則と Abstract Factory パターンとの違い Factory の原則 オブジェクトを生成するとき、オブジェクトの生成のためのインタフェースを提供し、インスタンス化するクラスを決定する役割はサブクラスで行う。 Factory Method パターン オブジェクトを生成するとき、オブジェクトの生成のためのインタフェースを提供し、インスタンス化するクラスを決定する役割はサブクラスで行う。 Abstract Factory パターン オブジェクトを生成するとき、具体的なクラスを明確にせず(カプセル化)、生成のためのインタフェースを提供する。 パターンの概要 Product 生成オブジェクト ConcreteProduct のインタフェースを決定 ConcreteProduct 具体的な製品を決定します。 サンプルコード Product.swift ConcreteProduct.swift ViewController.swift 実行結果 ※ XXX はプロジェクト名 まとめ 今回は ViewController の Protocol と Extension を利用して抽象クラスを実現していますが、次期 Swift では抽象クラスにも対応するみたいです。 次回は 生成パターン の Abstract Factory パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image

Nintendo: Nintendo Switch 本体の所感とオススメ周辺機器について

先週3日金曜に Nintendo Switch が発売されました。 Nintendo Switch に関しては、発売前より性能・開封・不具合報告等様々な情報があり、このプロダクトの注目の高さが伺えます。 任天堂のゲームは好きですが、今回は個人的なバイアスを排除して Nintendo Switch をレビューし、実際に買ってよかったアクセサリ等を紹介したいと思います。 目次 Nintendo Switch 概要 液晶保護シートは必須 純正ケースは価格相応の満足度 テーブルモードの充電はこれで解決 Nintendo Switch Pro コントローラについて まとめ Nintendo Switch 概要 本体についての詳細は公式ホームページや、YouTuber が解説してくれているので、ここではさっくりと概要を説明します。 性能 Switch を検討するユーザーはあまりマシン性能を気にする傾向にはありませんが、単純に数値だけで判断すれば PS3 とほぼ同じ、 PS4 の10分の1程度、と考えればいいかと思います。 デザイン これまでの任天堂らしい おもちゃ感 を排除したモダンなデザインとなっています。 Switch はハード・ソフト開発全般においての外観・グラフィックデザイン等においては、若手社員の意向がふんだんに取り入れられているとのことです。 品質 任天堂プロダクトの特徴である、耐久性、クラッシャブル構造、誤飲防止策といった、子供の利用を想定した工夫がこれまで通りいたるところに見受けられます。 コントローラ Joy-Con と呼ばれるコントローラが Nintendo Switch の ユニークな特徴 だと思います。 Joy-Con 自体のコントローラとしての役割は、ユーザーにとってそれほど新鮮な体験ではありませんが、ポータブルできる本体に対して、2つのコントローラが標準で付属 していることは、家族・友人とゲームを楽しむ敷居を低くすることに貢献しており、任天堂が掲げる「ゲーム人口の拡大」につながるアイデアだと感じました。 Joy-Con のもう一つの特徴である HD 振動に関しては、現在のところローンチタイトルである 1-2スイッチで体感できます。 確かに 繊細な振動を再現できている と思いますが、プレゼンテーションからの期待値が大きすぎたためでしょうか、思っていたほどすごいとは感じません でした。 注意点 個人的に購入時に気づいた Nintendo Switch に関する注意点です。購入時の参考になさってください。 Pro-Con のカラーリングは店頭で確認する ネオンブルー/ネオンレッド の ネオンレッド は画像で見るより 強烈な蛍光色 なので直接確認することをお勧めします。 本体や Pro-Con をケースに入れない方がよい ケースが Switch 本体・Pro-Con 間の電波を遮蔽する場合、Bluetooth 通信エラー等でコントロールの接続不良となる可能性があります。 本体や Pro-Con にステッカー等を使用しない方がよい 本体や Pro-Con 表面処理のコーティングがステッカー等を剥がすとき、一緒に剥がれてしまうみたいです。 ここで紹介したアイテム Nintendo Switch Joy-Con (L) / (R) グレー Nintendo Switch Joy-Con (L) ネオンブルー/ (R) ネオンレッド ※プレミア価格になっている場合、特別な理由がない限り、プレミア価格で購入はしないようにしましょう。 液晶保護シートは必須 おもちゃであることと価格である程度判断できると思いますが、Nintendo Switch のスクリーンはガラスではありません。 海外の報告では、ドックからの抜き差しによりスクリーン表面に細かな傷がついた と報告が入っていますので、スマートデバイス以上に 保護フィルムは必須 だと思います。 今回使用したのはこのガラスフィルムです。 評価は低いですが、モノ自体にはなんの問題もなく、ガラスフィルムの特徴である「やり直しがきかない」ことを知らないで、普通のフィルムと同じ感覚で施工し 失敗したユーザーの評価 です。 なお、このガラスフィルムは、Nintendo Switch スクリーン下部にあるスピーカー部分は開くように設計されています。 ガラスフィルムは1発勝負 ですので、本体開封と同時に風呂場に直行し施工しました。作業時間は1分程度で完了します。 コツは、画面に対しガラスフィルムの 外側にどの程度遊びがあるかを実際に目視 し、ガラスフィルムの保護シートを外してからは 長辺1片を目視で確認した余白分で合わせ、その位置を信じて フタを閉じるようにパタンと倒し一気に貼り付けること です。 自信のない方は、無理をせず通常のフィルムを選択すればいいかと思います。 ここで紹介したアイテム ニンテンドースイッチ用液晶画面保護シート『強高度 (9H) ガラスフィルムSW』 -SWITCH- 純正ケースは価格相応の満足度 純正ケースはケースのロゴがクリアーで印刷されているため全体的に控えめで、大人が持ち歩いても恥ずかしくない シンプルで上品なデザイン です。 今回はガラスフィルムを別途購入しましたが、ケースには 保護フィルムも付属 しているので価格相応の商品だと思います。 ケース内部にはパーティションがあり、そこにゲームソフトやメモリカード等が収納できます。 パーティションを立てると本体のスタンドを利用することなく、丁度良い角度でテーブルモードでのゲームが楽しめます。 ここで紹介したアイテム Nintendo Switch キャリングケース (画面保護シート付き) ※プレミア価格になっている場合、特別な理由がない限り、プレミア価格で購入はしないようにしましょう。 テーブルモードの充電はこれで解決 発売前に テーブルモードでのプレイ時に給電ができない ことが話題になっていましたが、本体の機能として充電できなくなっているわけではありません。 今回 Switch のために購入したスタンドは、Nintendo Switch 専用のものではなく、 スマホ・タブレット用のスタンドです。 USB-C の給電コネクタが本体下部にありますので、本体下部が開くような形状のスタンドに立てかければ、テーブルモードでプレイしながらの給電は可能 です。 値段は 3,000円弱と少し高いですが、Nintendo Switch だけではなく、iPhone や iPad とも兼用できますし、剛性、重量ともにしっかりしており、角度・高さ調整がフレキシブル、コンパクトに折りたためる ので非常にオススメです。 ここで紹介したアイテム iDudu iPhone スマートフォン スタンド デュアル 折り畳み式 ポータブル タブレット用スタンド アルミニウム製 (折り畳み式, ブラック) Nintendo Switch Pro コントローラについて 「ゼルダの伝説ブレスオブザワイルド」をプレイする方は Nintendo Switch Proコントローラーは 必須 だと思います。 その理由は、ゼルダの伝説ブレスオブザワイルドでは、プレイ中に「+」「-」ボタンへ頻繁にアクセスする必要があるのですが、Joy-Con の「+」「-」ボタンが押し辛い位置にあるため です。 左十字キー、右スティックも「+」「-」ボタン同様頻繁にアクセスしますが、親指に無理な負担をかけることなく操作可能です。 ゲームコントローラとしては高価ですが、Bluetooth ゲームコントローラとして PC… 続きを読む

Swift: デザインパターン > 生成パターン > Builder

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 生成パターン の Builder について説明します。 目次 [生成] Builder パターン まとめ [生成] Builder パターン Builder はオブジェクトの生成(建築)過程を抽象化し、動的にオブジェクトを生成(建築)することを可能にするパターンです。 パターンの概要 Director Builder に提供されているインタフェースを使用しオブジェクトを生成(建築)する。 Builder オブジェクト生成(建築)過程のインターフェースを定義する。 ConcreteBuilder Builder が定義したインターフェースを実装する。 Product Builder により生成されたオブジェクト(成果物)。 サンプルコード Director.swift Builder.swift ConcreteBuilder.swift Product.swift ViewController.swift 実行結果 まとめ Director は ConcreteBuilder をすることで、Product が生成されていることが確認できます。 次回は 生成パターン の Factory Method パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Swift: デザインパターン > 生成パターン > Prototype

オブジェクト設計において、定石となる手法をパターン化したものを デザインパターン といいます。 デザインパターンをきちんと勉強していない人でも、Web のおかげで知らず知らずのうちに使って(コピペして)その恩恵を享受しています。 自分自身パターン概要を一読しただけで、あいまいな使い方をしているものが多く、この際勉強を兼ねて GOF 23 パターンのなかでよく利用するものを Swift3 で記述していきたいと思います。 今回は 生成パターン の Prototype について説明します。 目次 [生成] Prototype パターン まとめ [生成] Prototype パターン オブジェクトの生成は、通常 クラス から new で オブジェクト を生成しますが、Prototype は、オブジェクト の clone メソッド から オブジェクト の クローン(複製) を生成します。 サンプルコード Client.swift ConcretePrototype.swift ViewController.swift Prototype は プロトコル により clone メソッドのインタフェースを提供します。 実行結果 まとめ Prototype はその特性上、1つや2つではなく、数十数百〜といったオブジェクトを生成しなければいけない場合に利用します。 次回は 生成パターン の Builder パターンを説明したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

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

img_sqn_00

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

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