プログラミング

非公開ディレクトリ画像表示編 PHPポケモン 91

PHP PHPポケモン ポケモン
非公開ディレクトリ画像表示編 PHPポケモン 91

非公開ディレクトリの画像を表示する

今回は、β版に向けての取り組みの1つとして、表示させる画像のアクセス先を非公開ディレクトリに変更します。

現在は公開ディレクトリ(Public)内のAssetsフォルダ内に配置していますが、これをルート直下においているStorageに移動させるのが目的となります。

 

gifのbase64

URLによるAPI取得ではなく、今回はPHP関数でbase64に変換した画像を取得、imgタグのsrcに突っ込むという方式を取ります。

 

時間の測定

まず「速度」の問題についてです。gif画像を取得してbase64に変換する段階でそこそこの時間がかかることが懸念されましたが、思った以上に早く処理負荷自体もそこまで掛かりそうになかったので、今回はbase64での再現となりました。

 

以下別環境で試した処理時間の計測結果です。

 

 

 

思った以上の結果です。サイズは小さいとはいえ、大量に取得するとそこそこの秒数になってしまうことを懸念していましたが、これなら全く問題なさそうです。

 

表示方法

次にbase64の取得から表示までの流れを見ていきましょう。

srcには画像へのパスを指定して取りに行くのが一般的ですが、base64に変換すれば文字列になるので、以下のような形式で埋め込むことになります。

src="data: image/gif;base64,・・・・"

 

次に、画像データをbase64の形式に変換するには、file_get_contentsbase_64_encodeを使用します。file_get_contentsでは非公開ディレクトリを指定することができるので、この段階で画像自体にはアクセス、変数へ格納することになります。 

$base64 = base64_encode(@file_get_contents('../image/pikachu.gif'));

file_get_contentsPHPマニュアル)

base_64_encodePHPマニュアル)

 

file_get_contentsではアクセス失敗時にエラーが返却されます。もし指定ファイルがみつかなければ問答無用でエラーが出てしまうため、これを無効化するためにもエラー制御演算子(@)をつけて、失敗時には空テキストを返しています。

※エラー制御演算子の採用理由については、後述します

 

取得後にはファイル情報を取得するために、getimagesizeを使い、src用の記述を追加してimgタグにセットすることで、表示することができます。

$info =getimagesize('data:application/octet-stream;base64,' . $base64);
$src = 'data: '.$info['mime'].';base64,'.$base64;
?>
<img src="<?=$src?>" alt="ピカチュウ">

getimagesizePHPマニュアル)

 

以上が、画像取得から表示までの流れです。変換、srcの形式に変換しているだけなので、基本的には固定の流れを当てはめているだけになります。

 

ルートパスの取得

base64の変換速度、表示までには問題がないことがわかりましたが、1点解決しなければならない問題があります。それがパスの特定です。

非公開ディレクトリを使う構成上、様々な場所から比較的自由にパスを指定・アクセスできるようにしておきたいものです。

なのでフレームワークのように、ルートパスを取得するための標準関数を作成します。

 

__FILE__を使った環境対応

ルートパスの特定方法についてですが、ローカル、テスト、本番全環境に対応できるよう、環境変数(__FILE__)を使用します。

 

パス取得用のグローバル関数(/App/Globals/PathGlobal.php
<?php
/**
* ルートパスの取得
* @param dot_path:string
* @return string
*/
function root_path(string $path='/')
{
    // 引数で相対パスの指定があれば、前後にスラッシュを追加してpreg_replaceで置き換え
    if($path !== '/'){
        $path = preg_replace("/\./", '/', '.'.$path.'.');
    }
    return preg_replace("/\/App\/Globals\/PathGlobal\.php$/", '', __FILE__).$path;
}

 

root_pathという関数を作成、その関数が置かれているファイル自体を特定するために、__FILE__を使い、現在いるルートからのパスをpreg_replaceで取り除いて返却しています。

もし引数で相対指定された場合にも対応できるよう、ドット記法対応形式で相対で返すようにしました。

 

使用頻度の高いディレクトリを特定する際は以下のように追加していきます。

/**
* ストレージパスの取得
* @param dot_path:string
* @return string
*/
function storage_path(string $dot_path='')
{
    return root_path('Storage.'.$dot_path);
}

 

これなら、同じ記述を繰り返し書かずとも、必要なディレクトリに合わせてパスを通すことができます。

 

ポケモンの判別

最後に、ポケモンの判別方法についてです。現在のポケモン画像を取得できるようにメソッドとして用意するものと、インスタンス化していなくても取得できるグローバルのものを分けて用意します。

 

まずはグローバルの画像取得用関数についてです。

<?php
/**
* ストレージパスの取得
* @param pokemon:string
* @param pause:string::front|back|mini
* @return string::data:base64
*/
function base64_pokemon(string $pokemon, string $pause='front')
{
    // 画像の取得処理
    $base64 = base64_encode(
        @file_get_contents(storage_path('Images.Pokemon.'.$pokemon).$pause.'.gif')
    );
    if($base64){
        $info = getimagesize('data:application/octet-stream;base64,' . $base64);
        return 'data: '.$info['mime'].';base64,'.$base64;
    }else{
        return config('notfound.'.$pause) ?? config('notfound.mini');
    }
}

 

引数に与えられたポケモンと、その向きに合わせて画像を探し出し、返却しています。もちろん、画像ファイル名が間違っていればエラーが出てしまうため、これを回避するためにも前述したエラー制御演算子を使って空判定をしています。

configには既にbase64に変換した宛先不明時の画像をテキスト形式で入れているので、失敗したとしても正常に画像は表示することが可能です。

 

本番環境でもし間違いがあれば、どんなポケモンが設定されているのかが確認できるので、どうしても見たい人はぜひデバックがてらいろんなポケモンと出会ってみてください。こちらは近日中に本番環境へ反映予定です。

※基本的には出さない方向ですので、もし見つかれば間違いなく「不具合」です

 

次に、インスタンス化したポケモンが自身の画像を取得するためのメソッドについてです。

/**
* 画像の取得
* @return string::data:base64
*/
public function base64(bool $transform=false)
{
    if(
        $transform &&
        $this->isSc('ScTransform')
    ){
        $pokemon = $this->getTransform()->pokemon;
    }else{
        $pokemon = get_class($this);
    }
    // base64画像を取得
    return base64_pokemon($pokemon);
}

 

基本的には自身のクラスを、先程作成したbase_64へ突っ込んで取得するだけの流れになりますが、引数に合わせて「へんしん状態」を考慮しています。

クラスの定数化に伴い、へんしんの格納先を状態変化配列に変更したので、もしフラグが立っていれば、へんしん状態込みで画像を生成、返却してくれます。

 

初期画面での表示は以下の通りです。

 

デベロッパーツールで確認すると、正常にbase64の画像が表示されいていることがわかりました。

以降はこちらの画像取得方法を使って実装していきます。

 

まとめ

いかがだったでしょうか。

今回のPHPポケモンでは「非公開ディレクトリの画像へのアクセス方法」についてご紹介しました。

システム構成を考えていけば、既存のフレームワークを真似ていくものが多くなります。なので、手っ取り早くイメージを掴みたい人は、ある程度の基礎が固まればフレームワークを使った業務に取り組んでみるのが良いでしょう。

 

現在プログラミング学習に取り組んでいる方や、ゲームづくりに興味がある人は、ぜひ参考にしてみてくださいね。

 

注目の記事

データ軽量化編 β版へ向けて  PHPポケモン 90
プログラミング
PHP,PHPポケモン,ポケモン
データ軽量化編 β版へ向けて PHPポケモン 90

β版の実装に向けて 大型アップデートにより、ある程度機能改善や実装箇所も増えてきましたが、それと同時に次の段階への移行が本格的に見えてきました。それがβ版です。   PHPポケモンは2020年12月現在α版となっており、完全な試作段階のWEBアプリケーションです。セーブ機能はなく、セッションの有効期...

PHPポケモン「バトルシステム実装編〜タイプ相性の判定〜」デモ&配布有り 19
プログラミング
jQuery,PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜タイプ相性の判定〜」デモ&配布有り 19

  システムを組むなら、仕様書や設計書はしっかり作りましょう。   ということで、またまたフォルダ移動やページ分けなどを見えないところでやりました。正直説明すると全く進まなくなりそうなので、改修部分は必要最低限にします。 結論、説明しません。(コード配布するので許してください)   そして今...

進化アニメーション 後編 PHPポケモン 60
プログラミング
PHP,PHPポケモン,ポケモン
進化アニメーション 後編 PHPポケモン 60

ポケモンの進化演出 前回に続いて、ポケモンの進化演出を実装していきます。バックエンドの処理はざっと説明をしたので、今回はフロントエンド(JavaScript)側の処理を作成していきましょう。   進化画面は新しく設けたので、こちらにもバトル画面で使っているメッセージ用JSを作成していきます。処理自体はほとん...

PHPポケモン「バトルシステム実装編〜ランク補正〜」22
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜ランク補正〜」22

ランク補正とは  ポケモンでは通常ステータスとは違い、バトル中にのみ変化するステータスが存在します。初代仕様であれば、「なきごえ」や「かたくなる」といった変化技により「こうげき」や「ぼうぎょ」の強化や弱体化をさせるものです。これはバトル中であれば引き継がれるものですが、交代やバトルが終了すればリ...

グローバル&ヘルパー関数編 PHPポケモン 61
プログラミング
PHP,PHPポケモン,ポケモン
グローバル&ヘルパー関数編 PHPポケモン 61

進化や技習得、HPバーや経験値バーの演出ができているのに、なぜ状態異常の演出はされていないの?   そう感じている方が少なからずいるはずです。 現段階では、状態異常になっても次の画面に移管しなければ表示されません。これは、PHP側で内部処理は行われているが、メッセージに合わせた動的な変更がされていな...

【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法
プログラミング
ESLint,JavaScript,jQuery,Toastr
【JavaScript】ESLint下でToastr(グローバル変数)を使用する方法

  ESLintはシステム全体で見れば便利なツールと言えますが、ライブラリなどを読み込む際に通常紹介されているような方法では使えなかったり、慣れていない人からするとどうしても躓くポイントが多くなるのも事実です。 ですが使いこなせるようになれば、開発がスムーズになることはもちろん、保守性やコードの...

フリーランスの最大の敵は休日!?正しい休息の取り方教えます
フリーランス
フリーランス,独立
フリーランスの最大の敵は休日!?正しい休息の取り方教えます

  フリーランスになりたての人は、仕事のペースがわからなかったり、無理に自分へ追い込みをかけて頑張ろうとしてしまうことがあります。 毎日を仕事でいることが、フリーランスにとっての心がけや意識のあり方としては大切ですが、それをそのままの意味で実行してしまうと明らかなオーバーペースになるのは事...

PHPポケモン(α)第1回目の大型アプデ
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン(α)第1回目の大型アプデ

第1回目 大型アップデートについて 本日、PHPポケモンの大型アップデートをしました。 今回のアップデートには全体的なデザインチェンジが含まれているため、今まで遊んでくれていた人も、新鮮な気持ちで初められることができるはずです。   デザインについては、PHPを使った開発をしている人からすれば馴...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力