NodeJS サーバー起動してHello world Node.jsでサーバーを起動するサンプルです。 ローカル環境にNode.jsをインストールするとJSを書いてターミナルでJSを実行するだけで簡単にサーバーが起動します。 ローカルにNode.jsをインストールするこ... 2019-08-08 00:27:32
blade ループのサンプル phpのlaravelのテンプレートエンジンbladeの基本記述のサンプルです。 --例えば$data['items']という配列に対してループの処理を書くときの例です。 [[@foreach ($data['items'] as $key => $item ) {{ $item->name... 2019-08-08 00:22:19
JS ESモジュールを使ったDOM操作 ES Modulesの仕様で書いたクラスを付けするだけのシンプルなサンプルです。 2017年からES6 Modules、ES Modules、またはESMと呼ばれるJavaScriptを外部参照する際の新しい仕様が広まってきました。 まだ筆者も勉強中ですが、簡単に説明... 2019-08-08 00:18:15
Laravel 導入してみました 当サイトのPHPを最新にアップデート、それに合わせてPHPフレームワークのLaravel(ララベル)にサイトをリファクタリング(機能はそのまま仕組みを変更)しました。 当サイトでは、PHPを7.3に変更することで、DBの接続が早まり、表示速度が改善されました。 また、それに伴い、PHPフレームワークLaravelを採用し、カオスにな... 2019-08-08 00:16:26
jQuery スクロールでURLを書き換える URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための... 2019-07-29 20:32:02
VueJS タブ切り替え クリックしてコンテンツが切り替わる表現のサンプルです。 タブの表現はよく見かけるので、VueJSでもサンプルを実装してみました。 デフォルトは一番左のコンテンツが表示され、タブをクリックすると、コンテンツが入... 2019-07-28 16:08:19
VueJS クッキーの操作 Vue.jsを使ったソースでクッキーの操作を実装しました。 フォームで入力した値をクッキーに書き込みます。 その後、ページロードでも読み込みますが、読み込みボタン、削除ボタンを実装しました。... 2019-08-08 00:08:12
PWA ホーム画面に追加するボタン プログレッシブウェブアプリケーションが徐々にブラウザでサポートされ始めました。その機能を使ってアプリのようにホーム画面に追加することができるようになったので、実装してみました。 2018年2月頃からGoogle Chromeのアップデートの中でウェブサイトがアプリライクな機能を実装できるようになるPWAといういろんな機能が徐々にサポートされてきま... 2019-08-03 23:12:02
jQuery 自動ドア風アニメーション 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス... 2019-07-29 07:56:24
CSS 左右に行き来するアニメーション 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの... 2019-07-28 14:44:36