動作を確認してみましょう。↓下のような関係で、Childクラス から testメソッド を実行したら、どのクラスの helloメソッド が呼び出されるでしょうか？ 結果です。 ↑Childクラス から testメソッドを実行すると、①self の場合は、それが書かれているクラスの helloメソッド を呼び出す。②static の場合は、継承後のクラスの helloメソッド を呼び出す。ということが分かりましたよね。 因みに、Childクラス に Parentクラス と同じ __invokeメソッド を定義すれば、self は Childクラス になります。
PHP の self と static について Read More »
↑nginxの設定ファイルの一部です。３行目で、例えば「/img/mosss.png」のパスを「/mosss.png」に変更して、バックにあるWEBに転送しています。
Nginx リバースプロキシ時にパスを変えるには？ Read More »
Laravel と Livewire をインストールして、PHPクラスメソッドを実行後にプロパティの値を確認する手順。 プロジェクト名（promise）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、promiseコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.promise は呼び出されます。 生成された promiseコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Promise.php ↑１０行目。resetメソッド で値をリセットしています。 resources/views/livewire/promise.blade.php ↑ポイント。２行目はプロミスを使って同期後にログを出力しています。同期処理にはもう１つのやり方があります。１８行目に async を付けて、１９行目に await を付けると同期処理で実行できます。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。
Livewire JavaScript で PHPのクラスメソッド を実行して、その直後にプロパティの値を確認するには？ Read More »
Laravel と Livewire をインストールして、Fomantic-UI の Slider を使う手順。 プロジェクト名（slider）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.slider は呼び出されます。 生成された sliderコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Slider.php ↑デハイドレートで createメッセージ を送信しています。 resources/views/livewire/slider.blade.php ↑コンポーネントの配置と、createメッセージ を受信したらスライダーを表示するようにします。 resources/views/index.blade.php ファイル を作成します。 ↑ライブワイヤーのロード時に、createメッセージ を送信してスライダーを表示しています。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。
Livewire で Fomantic-UI の Slider を使うには？slider Read More »
Laravel と Livewire をインストールして、Fomantic-UI の Toast を使う手順。 プロジェクト名（toast）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.toast は呼び出されます。 生成された toastコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Toast.php ↑上の説明です。click1メソッド は、JavaScript を evalイベントで送って JavaScript を実行する方法です。click3メソッド は、settings（JSON）を toastイベント を送って toast を表示する方法です。 resources/views/livewire/toast.blade.php resources/views/index.blade.php ファイル を作成します。 ↑eval と toast のイベントを Livewire.on で受信して、スクリプトを実行するようにします。※
Livewire で Fomantic-UI の Toast を使うには？toast Read More »
Pichuクラス とそれを継承した Pikachuクラス を作成して確認しようと思います。 ↓下のコードのポイントです。 ①JavaScriptでクラス②継承③コンストラクタ・・・PHP の construct ではなく constructor なのです。④デフォルト引数⑤super・・・parent ではない。⑥this・・・this は PHP と同じですね。this-> ではなく this. です。⑦コンストラクタでプロパティの宣言・・・ゲッター、セッターと同じ名前はNGです。⑧ゲッター⑨セッター⑩メソッド・・・メソッド名の前に function はありません。⑪メソッド上書き コンソールログの実行結果です。 CLASS を別ファイルに書き出す ↑上で作成した javascript を別ファイルに書き出してみます。そのままファイルに書き出すだけではありません。また、scriptタグ で javascriptファイル を読み込んだのは昔の話です。 pichu.js ↑ポイントは１行目。クラスを書き出す場合、class の前に export を付けます。export を付けないと他のファイルから import することができません。 pikachu.js ↑ポイントは１行目。Pikachuクラス は Pichuクラス を継承するので、import で Pichuクラス を読み込む必要があります。 ↑ポイントは４行目。scriptタグ の type に module を指定することです。module を指定しないと、以下のエラーがでます。
JavaScript の Class について Read More »
まず、fomantic-ui でボタンを作ってみました。↓ 「通常のボタン」を押しても何も起こりませんが、「アクションボタン１」を押すと、/create に GETのリクエスト が飛びました。 受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 ルートパラメータを与えられるか確認してみます。 受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 「API アクションとデータは、メタデータでも指定できます。」とのことなので、これを確認する為に「アクションボタン２」を追加します。 「アクションボタン２」を押すとログファイルに add と 23 が来ました。 「on:’now’」を付けると、画面を表示した時点で（ボタンを押さなくても）リクエストが送信されました。 fomantic-ui の API がちょっとづつ見えてきました。 実は今までやった送信は GET でした。次、POST 送信に行ってみます。 ↑POST送信は、Laravel なので data に csrf_token を渡しています。受信側（Laravel）の routes/web.php に以下のルートを追加してログファイルで確認します。 POST で送信することができました。次に送信する時に、ルートパラメータ、postの値を書き換えることができるようですので確認します。 送信する前に beforeSend で urlData を書き換えることが出来ます。 送信する前に beforeSend で post の値を書き換えることが出来ます。 ひとまずここまでです。
Formatic-UI の API を使うには？ Read More »
Laravel と Livewire をインストールして、ドロップダウンのカスタムディレクティブを作成する手順。 インストール時にプロジェクト名のディレクトリが作成されます。 ↓下のメッセージが表示されてインストールは終わります。 Laravel のインストールはここまで。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.multiple は呼び出されます。 app/Http/Livewire/Multiple.php resources/views/livewire/multiple.blade.php ↑注目です。２行目に「wire:module=”dropdown”」と「wire:module.settings=”window.settings()”」を追加しました。JavaScript で dropdownメソッド の呼び出しは行っていません。 ↑Livewire.directive で「wire:module」を定義しています。これでエレメントに対して dropdownメソッド を実行するようにします。一見「できたかな」と思ったのですが、「Transition: Element is no longer attached to DOM. Unable to animate. Use silent setting to suppress this warning in production. slide down out」のエラーがでてしまいましたので、エレメントを destroy で削除しています。そうすると onHide が呼び出されないので、何か考えなければならないかもしれません。 カスタムディレクティブを使うことで、ブレードファイルに JavaScript を書くことなく、コンポーネントを表示することができました。
Livewire で Livewire.directive でカスタムディレクティブを作るには？custom Read More »
Laravel と Livewire をインストールして、Fomantic-UI の Multiple Selection を使う手順。 プロジェクト名（multiple）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、progressコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.multiple は呼び出されます。 生成された multipleコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Multiple.php resources/views/livewire/multiple.blade.php resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します ブラウザで確認します。
Livewire で Fomantic-UI の Multiple Selection を使うには？multiple Read More »
