Acenumber Technical Issues – ページ 4

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

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

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

画像スライダー導入で発生する問題

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

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

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

問題解決の基本方針

此の問題を解決するためにメイン画像部分を背景画像、即ちスタイルシートで background-images に指定する方法が考えられるでしょう。此の手法を取れば画像を常に一定のサイズで表示されるにも関わらず幅広の部分の横幅がブラウザサイズを超えてもブラウザサイズがページ全体を規定する一定の幅以上であれば横スクロールは発生しません。

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

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

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

Hanamaru and uPanda in iPhone Game Balloons Occpy

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

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

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

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

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

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

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

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

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

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

Spritekitに於ける座標系（2016年7月9日）
Spritekitに於ける座標系補遺（2016年7月11日）

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

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

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

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

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

テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題

スタイルシートで確りフォントサイズの指定をしているのに iPhoneに限って其の折角の指定が無効になっている場合が多々あります。確認の為にPCブラウザのエミュレータで見て見ても問題ないのにiPhoneでは想定外のフォントサイズで表示されている事例としては Portraitモード、即ち縦位置で見ている画面をLandscapeモード、即ち横位置にすると文字サイズがは大きくなる現象は割と知られているのではないでしょうか。此れはスマホに於けるユーザービリティを考慮してスマホのブラウザでのみ有効な -webkit-text-size-adjust なる属性が用意され効いているのに起因するのも周知されている処だと思います。

iPhone 14 128GB 5G対応SIMフリー

しかし例えば自前のブログでは屡々振り仮名を持ちいるのですが此の時利用する ruby タグで囲った部分には此の属性は効かないようでタグ内に記入した文字は横位置でも縦位置と同じフォントサイズであれば横位置では思わぬ不揃いの文章表示となってしまうのでした。此れなどは以下のリンク、サイト ヒビヅレの2011年5月24日の記事などに代表される情報を参照すれば bodyタグ、若しくはフォントサイズを指定する箇所の大枠部分に -webkit-text-size-adjust: 100%; を効かせてやれば解決するのでした。

SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装

手元の開発ゲームに於いてキャラクターの縦横無尽に動き回る背景の空部分の広大な空間を表現するためにグラデーションを用いたく考えました。青空は単に一様に青いのではなく青さも位置取りに基づいて薄っすらと変化させたい要請が発生した訳です。

docomo版iPhone7Plusゴールド256GB白ロム

其処でXcodeでグラデーションを描画する実装が必要になり大凡簡単なものだろうと高を括っていたら案に相違して其れ程お手軽に実現出来るメソッド等はどうやら用意されていない様です。

SpriteKitに関する情報は余り多くなく其れでこそ本ブログも幾許かの役立つ情報を提供出来るかも知れない所ですが残念ながらSpritekitでは現状背景グラデーションに用意されたメソッドは見当たりません。しかし UIView では幾つか方法がネットに共有されているのを見付けましたので下にリンクを貼り置きましょう。

Spritekitの物理空間で衝突を発生させる為の必須処理と衝突判定とすり抜け

アップル社がiPhoneアプリ開発に提供する2Dゲーム用フレームワーク SpriteKit を開発アプリに適用すればゲーム画面内に物理空間を生じせしめ内部でオブジェクト同士の衝突の検出を可能にします。

処でアップル社が提供する統合開発環境、 IDE（Integrated Development Environment）たるXcodeでは補完機能が随分重宝します。特にスティーブ・ジョブズに依って齎された NEXTSTEP を継承するアップル社の開発環境では長くなり勝ちなメソッド名や変数名などを扱うには補完機能がないとなると実に不便に感じるものです。

さてSpritekitを利用して開発するゲームに於けるコーディングでは利用するクラスファイルのヘッダファイル冒頭に以下記述が必要になるのは周知でしょう。先ずはSpritekitをインポートしなければならないのは言わずもがなです。

SwiftのPlaygroundsを使ってみた

下の図は手持ちのiPad Pro 9.7インチ版のApp Storeで Swift Playgrounds で検索した結果表示です。どの環境でも此の如く先ず真っ先にアップル社が提供するiPad専用アプリ Swift Playgrounds が表示されるでしょう。

アップル社から提供されるアプリで尚且つ無料でもあり躊躇うことなく入手インストールします。なお Swift Playgrounds の詳細説明画面を開けば下図のように何やら楽しげな内容を垣間見せるものとなっています。レートが 4+ 、即ち制限なく年少者にも問題なく見せられる設定となっておりアップル社としては積極的に次代を担う子供達に使用を促すものとして提供されている様子が伺えるでしょう。