プログラミング

非公開ディレクトリ画像表示編 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ポケモン「タイプ実装編」15
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「タイプ実装編」15

ポケモンのタイプについて  2020年剣盾シリーズでのポケモンでは、全18タイプが実装されています。初代では15タイプ(あく、はがね、フェアリーを除く)からスタートして、たった3つのタイプしか増えていない、と感じる方もいるかも知れませんが、この追加に関してもバトルの歴史を大きく動かしてきたのです...

フレンドリィショップ編 開店準備 PHPポケモン 75
プログラミング
PHP,PHPポケモン,ポケモン
フレンドリィショップ編 開店準備 PHPポケモン 75

アイテム(どうぐ) PHPポケモンもバトル機能が一通り揃ってきたので、新機能として「アイテム」の実装に取り掛かります。 アイテムにも色々ありますが、技やポケモンのクラス同様に、初代で登場したアイテムから順番に取り揃えていきましょう。   キズぐすりの実装 ポケモンのどうぐ、一番手は「キズぐすり」...

Toastr(トースト)活用編 PHPポケモン 100
プログラミング
JavaScript,PHP,PHPポケモン,ポケモン
Toastr(トースト)活用編 PHPポケモン 100

記念すべき第100回目です!   色々考えましたが、100回目だからと言って特別な内容ではなく、いつもの流れの延長での開発進行となります。ご了承ください。 今回は、何人かのプレイユーザーの声も参考にしながら、ユーザビリティをあげるための機能追加を進めていきます。   Toastr(トースト)と...

数字が増える毎日投稿テクニック【銀の弾丸はありません】
ライティング
YouTuber,ブロガー,銀の弾丸
数字が増える毎日投稿テクニック【銀の弾丸はありません】

  まずは以下のグラフを御覧ください。     私が管理しているYouTubeのチャンネルで、1日投稿ができない日がありました。 そうすると、その日がいつなのかすぐわかるぐらい露骨に視聴者数が減ったのです。それほど、毎日投稿することは結果に大きく影響します。   今回は、本ブログで何度も切り口を変え...

起業・独立を考えている人に向けた具体的なアドバイス3選
雑記
起業・独立を考えている人に向けた具体的なアドバイス3選

  「どのタイミングで起業すべき?」 「会社を作るためにはどういったことをすればいいの?」   あなたはこんな悩みを抱えていませんか? 今回は、これから独立・起業をしようと考えている方や、そういった野望をいだいている人に向けて、自らの経験を元に具体的なアドバイスを3つピックアップしてご紹...

get_template_partで引数を渡す方法(WordPress5.5以降)
プログラミング
PHP,WordPress
get_template_partで引数を渡す方法(WordPress5.5以降)

WordPress5.5へのバージョンアップで、大きく機能が追加されました。中には変更に戸惑っている人もいるかも知れませんが、個人的にはエンジニアの要望を大きく取り入れて自由度がアップした印象があります。 今回はその中でも、多くの方が待ち望んでいた「get_template_part」の変更点についてご紹介します。 ge...

これをしてはいけません!「よくわかるSEO対策」エンジニアのための基礎知識編
SEO対策
htaccess,HTML,JavaScript,SEO,エンジニア,プログラミング
これをしてはいけません!「よくわかるSEO対策」エンジニアのための基礎知識編

  近年ではWebサイト制作会社や個人事業主はかなり増えてきました。 会社によっては力を入れている部分は異なり、主に「デザイン」「機能(システム)」「SEO」という3つに分けられます。 飽和しているのでは無いかと囁かれている中、この3つすべてを揃えた事業者は意外と少なく、個人となれば更に少なくなります。...

フィールド効果技編(しろいきり) PHPポケモン 50
プログラミング
PHP,PHPポケモン,ポケモン
フィールド効果技編(しろいきり) PHPポケモン 50

フィールド効果技とは ポケモンの技の中には、ポケモンに対して状態変化や異常を与えるもの以外に、フィールド自体に効果を持たせるものがいくつかあります。PHPポケモンでは未実装ですが、そういったフィールド効果技はポケモンを交代したとしても場に効果が残り続けます。  場の状態(ポケモンwiki) https:/...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力