iPadで表示の崩れる原因となるviewport出力を他端末と切り分ける

アップル社からiPadがローンチされて以来すっかりタブレットは市民権を得た感があります。 従って今でもiPadはタブレットの代表として世の中に認知される所となっていると言って過言ではないでしょう。 PCよりお手軽に起動出来、ソファに腰掛けて利用可能ながら、 スマートフォンより表示領域が大きいタブレットは、 電子書籍閲覧や、動画サイト閲覧などに威力を発揮しますが、 矢張りWebサイト閲覧は其れ等の中でも最も利用頻度の高いものでしょう。 iPadでは標準装備のWebブラウザ Safari が大いに用いられる処です。

2010年にアップル社から発売された初代iPad

さて現在Webサイト実装の主流として台頭して来ている手法が レスポンシブWebデザイン です。 昔風に言えばリキッドデザインと言えば通りが良いかも知れません。 リキッドデザインが現代風に進化して一つのHTMLファイルで 様々な表示領域の端末に対応可能としたのがレスポンシブWebデザインで、 一般に「レスポンシブ」と言えば其れを指す程普及した様に思います。

処で此のレスポンシブWebデザインをタブレットの代表格たるiPadで表示すると多くの場合、 表示崩れなど問題が生じる様です。 共に現在の主流たる手法と端末が相性が悪いのは由々しき事態です。 願わくばW3Cなど規格制定組織やアップル社など大企業の対応が進み 何の考えもなく問題なく表示されるのが最も宜しい解決法でしょうが、 現時点ではどうも其の様な方向に進んではいないらしいので、 どうしてもWebサイト制作側で其々対応が必要となります。 折角の表示領域の広いiPadであれば是非情報の一覧性の優れたPC版の表示を求めたく、 本記事ではiPadでレスポンシブWebデザインの表示崩れを防ぎPC版の表示を目論見ます。

"iPadで表示の崩れる原因となるviewport出力を他端末と切り分ける" の続きを読む

タブ表示したカテゴリ毎のリンクリストでリンク先でも同カテゴリを表示する

スマートフォンに於けるWebサイト表示では PC表示に比べて一般的に表示領域が狭くなります。 スマートフォンでは縦に構えて閲覧される場合が多ければ特に横幅は制限が生じるものです。 此の為、一覧性が劣れば工夫が表示にも必要になります。

スマホでリンク先リストをカテゴリ毎にタブ表示する

例えば図に見られる様にリンクリストをカテゴリ毎にまとめ 上部にタブを設え該当するリンクリストのタブがタップされた場合に リンクリストの表示を切り替えるのはしばしば見られる手法でしょう。 図ではデフォルトでオレンジ色のリンクリストAがアクティブとなって表示されており、 他の緑色のリンクリストB、薄紫色のリンクリストCは非表示となっています。

処で、其々のリンクリストカテゴリ内のリンクが増えれば、 此れ又、縦に長くなってスクロール必須の一覧性の劣る事態が生じますから、 下の図の如く其々のリンクリスト下部に示した様な其々のカテゴリに応じた ページングを表示するのも良く用いられる処でしょう。

リンクリスト上のタブをタップすればリンクリストの表示が切り替わる

此れを何も考えず其々のリンクリスト上のページングリンクをタップすると どのカテゴリのリンクリスト上あったとしても 新しく開かれるページはデフォルト状態であり、 上の図で言えばリンクリストB上のページング、リンクリストC上のページングから遷移して開かれるページでは リンクリストAが表示されてしまうでしょう。 閲覧者の身になればリンクリストB上のページングから遷移したページでは 開かれるタブはリンクリストBでなければ困惑してしまいます。 此れではユーザービリティ上、大きな問題を抱えていると言わざるを得ません。

其処で此の問題を解決する為に…

"タブ表示したカテゴリ毎のリンクリストでリンク先でも同カテゴリを表示する" の続きを読む

jQueryによるaタグリンクアドレスへのディレクトリ挿入処理

スマートフォン閲覧用のWebサイト制作にあたって、 「/sp/」などと命名したディレクトリを立て、 ルート「/」のPC版と一対一で対応させた上でスマートフォンからのアクセスの場合には スマートフォン専用ページを表示させるのは以前は一般的な手法でした。 現在ではレスポンシブWebデザインが主流となり余り見られなくなった手法ではありますが、 当該手法を採用したWebサイトのメンテナンスに於いては PC版との整合性を取る必要に迫られる事案もあります。

 

例えばブログシステムに於いて一般の利用者が記事投稿する際に 内部リンクを記載すればPC版にリンク先を求めるのは当然でしょう。 すると然るべきリダイレクトが施されていない場合には スマートフォンで当該サイトを訪れた閲覧者はPC版リンクを踏みますから 折角用意したスマートフォンページは表示されはせず、 一般的に横幅の広い、従って小さな文字のページの閲覧を強いられる格好になってしまいます。

其処で問題のあるリンクに於いては スマホ版での巡回に支障をきたさない様に配慮し、 PC版のリンクアドレスをリンク時に改変して「/sp/」を先頭に挿入したい要請があります。 本記事では此の実現にjQueryを用いて解決を図りたく思います。

"jQueryによるaタグリンクアドレスへのディレクトリ挿入処理" の続きを読む

複数の任意時間に於けるコールバックメソッド

ゲーム開発に於いては単位時間の処理が欠かせないものとして iPhoneアプリの製作の際、基本的な統合的開発環境のXcode上での処理について 本ブログに稿をものしたのが以下の2017年3月27日の配信記事でした。

-(void)update:(CFTimeInterval)currentTimeメソッドに於ける任意時間のコールバックメソッド

処で斯くも重要な要素たる単位時間処理は 唯に一箇所のみで必要となるに限られるものでもなく 手元の開発ゲーム バルーンズ・オキュパイ でも複数箇所で利用するに如くはない事態が出来しました。 具体的にはキャラクターの移動処理とバルーン陣地の拡大処理が異なる単位時間に処理されるのが其れで 而して一つでは間に合わない様相を呈したのです。

其処で対処として考えたのが…

"複数の任意時間に於けるコールバックメソッド" の続きを読む

WordPressにJavaScript背景画像スライダーVegasを導入する

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

中でも図示した様にメイン画像の部分を幅広にするだけでなく 其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。 画像スライダー部分をページ全体を規定する一定の幅より広く取ると ブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが 一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、 ちょっとしたことで画面が左右に動き扱い難いだけでなく 此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にすると ブラウザの横表示が狭い場合には横幅はきっちり収まるのですが 縦幅も応じて小さくなってしまい、 他のコンテンツ部分と著しい差が生まれてしまいます。 此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く 其れ等の文字は極めて読み難い状態が招かれざるを得ません。

此の問題を解決するために…

"WordPressにJavaScript背景画像スライダーVegasを導入する" の続きを読む

Spritekitを利用したゲームAIもどきの実装

今流行りのAI、即ち人工知能とタイトルすれば甚だ釣り気味ですが、 ゲーム作成に於いてはコンピュータにプレイヤーの相手をさせる場合、 大にしろ小にしろ孰れ其の為のアルゴリズムを用意しなければなりません。 其れは手元の開発iPhone専用ゲームアプリ バルーンズオキュパイ でも一般です。

略してバルオキュでは プレイヤーが画面上に風船を膨らませて自陣を拡張しているのに対し 此のゲームでは敵キャラクターとなる うさ犬 兄弟の弟、 はなまる が画面上を所狭しとジャンプしまくりプレイヤーが膨張させつつある風船を割って回る、 と言うゲーム内容になっています。 此の際、はなまるはプレイヤー陣地の確定した部分は避けて飛ぶ必要があります。 また膨張中の風船にはなまるが飛び込めば其の風船は割れてプレイヤーの負けが確定しなければなりません。 此の両者の解決を同時に図る上手い方法はないものかと模索して、 どうやら共に衝突判定が使えるだろうと思い付きました。 ゲームAIに衝突事件を組み込んで実装すればはなまるは確定風船を避けつつ時には膨張中の風船を割りに掛かるだろうと言う目論見です。

Hanamaru and uPanda in iPhone Game Balloons Occpy

衝突判定の実装は一般に難しいと言われる処ですが アップル社がXcodeに用意する2Dゲーム開発フレームワークである SpriteKit には最初から其の機能が用意されているので其れを用いることにします。

"Spritekitを利用したゲームAIもどきの実装" の続きを読む

WordPressで特定親カテゴリーとその子カテゴリー全ての記事一覧を日付順に取得する

WordPress案件でよくある要請にカテゴリー記事一覧の表示があります。 単に特定の単独カテゴリーの記事一覧であれば 其の方法はネット検索すればかなり豊富に見付かります。 此れが複数カテゴリーの記事一覧の表示になると些か其の方法が見付かり難くなるのは カテゴリーの複数化に因る表示のバリエーションが増え、 情報が其々の状況に応じたものに寄せてあって目的に適い難い部分が出てくるからかも知れません。

バリエーションの一つとして此の要請のオプションに於いては屡々 カテゴリーの親子関係を考慮した記事一覧の表示が求められと言う条件が与えられます。 具体的に言えば 複数カテゴリーの其々最新の記事を一つづつ表示したり、 複数カテゴリーを横断して最新の記事を任意数表示したりする条件から、 中には親子カテゴリーを考慮して特定親カテゴリーに属する子カテゴリーの其々の記事一覧を表示したりするものまで なかなか多様な条件に彩られると言っても良いかも知れません。

手元で実現したい条件としては 特定の親カテゴリーの記事一覧と其の子カテゴリー全ての記事一覧を合わせて 中から日付順に表示していく必要があるもので、 此れもオプションとしては要請の度合いが高いものに属するかも知れません。 此の条件を実現しようとすると どうしても複数カテゴリーの記事の全てを取得して 時系列で整列させて上で表示させなければならなくなります。

"WordPressで特定親カテゴリーとその子カテゴリー全ての記事一覧を日付順に取得する" の続きを読む

ゲーム画面を覆うようにforループでNSMutableArrayを生成する

陣取りゲームとして目論む処のゲーム主画面に於いては 陣地の遣り取りの判定のために画面全体を区切る必要があります。 区切った画面各々にプレイヤーの陣地か如何かの判定フラグを持たせ 更には他にも様々に応用して用いる使い勝手の良い 配列 として扱う腹積もりです。 この際ゲーム画面の幅に合わせて区切りを柔軟に保たせるために 可変配列を用いることにします。

可変配列オブジェクト NSMutableArray の概要については iPhoneアプリ開発の虎の巻 のページ NSMutableArray などが参考になるかも知れません。

"ゲーム画面を覆うようにforループでNSMutableArrayを生成する" の続きを読む

Scene受け渡し時の画面サイズの初期化

キャラクターが空を飛んでいるのを表現するのに iPhoneの画面を超えて縦横無尽に飛び回る状況を作り出したい為に上方に上限を設けぬ実装を鑑み Spritekitに於ける座標系を考察したのが以下列挙する本ブログの両記事です。

処が此処に問題の内在が発覚しました。 時折デバッグの為に変数を出力して検討するのは誰もが実行する処でしょう。 2017年5月5日記事 SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装 に記したようにゲームに於いてキャラクターが上空に飛翔すればするほど 宇宙空間に近いた表現で空色を濃く染め上げるのに背景色を変化させたのですが 此の時必要なのはキャラクターの縦軸の位置変数であるのは言う迄もありません。 其の変数とした honmaruPosYRatio の算出法は以下コードとなります。

"Scene受け渡し時の画面サイズの初期化" の続きを読む

WordPressでjQueryを必要とするJavaScriptファイルをjQueryの後に読み込む

世の中フロントエンドと言えばFacebookの提供するフレームワークなどで大規模なものを想起し勝ちとなりましたが まだまだホームページに於ける小規模な実装では jQuery が活躍しますしWordPressの2017年最新版に於いても標準で読み込まれるような実装となっています。 ちょっとしたスムーススクロールやアンカーリンクの無効化などを一部に適用するなどの要請では 特定のページに読み込むだけの実装で済ませられれば大規模なフレームワークでは些か冗長さを免れません。 jQueryを利用すれば此れ等の如きJavaScriptファイルは僅か数行となりますから尚更です。

懐かしのポケコン シャープポケットコンピューターPC-1210
懐かしのポケコン シャープ ポケットコンピューター PC-1210

此れをWordPressの特定ページに読み込ませたりする際には functions.php にWordPressの特有関数 wp_enqueue_script を用いてファイル読み込みを実装するのが定石でしょう。 例えばhomeで関連づけられた wp_register_style を用意して孰れかのタイミングで add_action おけばif文で条件分岐した wp_enqueue_style で読み込めると言った塩梅で実に重宝です。

"WordPressでjQueryを必要とするJavaScriptファイルをjQueryの後に読み込む" の続きを読む