画像ファイルをドラッグ＆ドロップでブラウザのアプリケーションに取り込ませる方法を調べました。 例えば、以下のような写真をカレンダー形式で管理するアプリケーションを作るとして、画像ファイルをドラッグ＆ドロップで表示できれば便利かと思います。 JavaScriptだけを使った簡易な実装方法と、PHPを使ったきちんとした（つもりの）実装方法の２パターンを書きます。 1.JavaScriptだけで実装 calender.html <table> <tr> <td id="box1">ボックス1</td> <td id="box2">ボックス2</td> </tr> </table> drag_drop.js $(function () { $("td").on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); $("td").on('drop', function (e) { e.stopPropagation(); e.preventDefault(); var boxid = $(this).attr("id"); var items = e.originalEvent.dataTransfer.items; var file = items[0].getAsFile(); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { $("#" + boxid).append("<img src=" + reader.result + " width=130>"); }; }); }); このコードでたしかに画像をブラウザに表示させることはできるのですが、画像を保存できないため、実用上はあまり意味がないものです。 aタグに画像を挿入し、aタグのDownload属性を使ってダウンロードフォルダに格納することも試したのですが、使い勝手はあんまり良くなかったです。 2.PHPを使って実装 calender.html <table> <tr> <td id="box1"> ボックス1 <?php if ($box == "box1") { print("<img src=\"" . $data . "\" width=130>"); } ?></td> <td id="box2"> ボックス2 <?php if ($box == "box2") { print("<img src=\"" . $data . "\" width=130>"); } ?></td> </tr> </table> drag_drop.js $(function () { $("td").on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); $("td").on('drop', function (e) { e.stopPropagation(); e.preventDefault(); var boxid = $(this).attr("id"); var items = e.originalEvent.dataTransfer.items; var file = items[0].getAsFile(); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { $("#" + boxid).append("<form id=\"upload" + boxid + "\" action=\"calender.php\" method=\"POST\"></form>") $("#upload" + boxid).append("<input type=\"hidden\" name=\"day\" value=\"" + boxid + "\">"); $("#upload" + boxid).append("<input type=\"hidden\" name=\"data\" value=\"" + reader.result + "\">"); var form = $("#upload" + boxid); form.submit(); }; }); }); calender.php function get_post_data($key) { $str = ''; if (isset($_POST[$key]) === TRUE) { $str = $_POST[$key]; } return $str; } $box = ""; $data = ""; if ($_SERVER['REQUEST_METHOD'] === "POST") { $box = get_post_data('box'); $data = get_post_data('data'); } include_once "calender.html"; これで画像をブラウザに表示させることができます。 あとは画像データのDBへの出し入れと、ブラウザへの描画の部分を修正すれば、意図した通り画像ファイルの取り込みをドラッグ＆ドロップで実現できます。

はじめに こんにちは。かつて稼働していたTwitterアカウントヒカキンシンメトリbotをご存知でしょうか。 全自動でヒカキンさんのサムネイルなどをシンメトリー（左右対称）にしてTwitterにアップロードするアカウントです。 こんなやつ↓ 本人に取り上げられて一時期有名になりました。 ですがそのアカウントは2019年末より稼働しなくなってしまいました。 なので今回緊急事態宣言発令中でほぼニート状態の暇人がヒカキンシンメトリーbotを勝手に復活させました。 Twitter @SYMHIKA_SEI 本家との変更点 大きな変更 投稿時刻 まず大きな変更として毎日00:10に前日分の画像のシンメトリーを一括して投稿します。 本家シンメトリーbotでは本人様がアップロードされた直後の1時間以内くらいに投稿されてましたが、新しいやつではサーバーの都合上00:10に投稿します。（00:00分じゃ駄目なのかという話もあるかも知れませんが別のbot @randomhikakin の定期実効タイミングだったりMySQLのキャッシュリフレッシュをしてたりと処理が重くなりがちなので10分遅らせています。 取得対象 【旧】HikakinさんのYouTubeサムネイル・Twitter画像 【新】HikakinさんのTwitter画像 +SeikinさんのTwitter画像 新版ではSeikinさんを勝手に追加しました。（ごめんなさい） ※YouTubeのサムネイルの取得を廃止しました。 背景としては2019年頃よりYouTube動画をTwitterで告知する際にOPG(カード画像)が表示されなくなったため動画投稿者は直接Twitter上で動画サムネイル画像をアップロードするようになったからです。YouTube API v3等を使わずにTwitter APIのみで完結するようになったのでありがたいです。 追加取得 後述する問題点に対処するため過去のHikakinTVのサムネイルのシンメトリーを毎日18:00に投稿します。 独自に取得したHikakinTVチャンネル動画データベースから取得する感じです。 全動画のjsonファイルは配布してあります。 ※PHPで特定チャンネル内のすべての動画情報を一括して取得する方法(自筆/下は英語版) システムの変更 顔認識 顔認識を行う仕組みを変更しました。 【旧】Google Cloud Vision API 【新】OpenCV（Python） 退化してんじゃね？って思われそうですが仕方ないんです。お金払うのが嫌なんです… AzureのComputer Vision APIなら制限内で無料でやれるかも知れないんでそれでやるかもしれないです。（情報処理学会のジュニア会員なのでAzure Studentの1万円クーポンがあるから使おうか使うまいか…） システム設計 bot内のシステムは本家botのソースコードは利用せず一から組み直しました。 ※本家Botのソースコードは↓ 使用言語・ライブラリは以下のとおりです。tweepyとかを使うとオールPythonで行けたかも知れませんが動けばヨシ！とにかく暇なうちに…と考えた結果死ぬほど使い倒したPHPのtwitteroauthでツイート関連処理は組みました。 ソースコードは頒布しません。汚いので。 処理 言語(ライブラリ) ツイート画像取得処理 PHP(abraham/twitteroauth) 顔認識＆反転処理 Python(OpenCV/numpy) 画像投稿処理 PHP(abraham/twitteroauth) 定期実行処理 Linuxのsystemd.timer ※動作環境:Ubuntu 20.04 LTS / PHP7.4(Composer使用) / Python3.8(pip使用) データフローダイアグラムはこんな感じです。 問題点 今回新しく作った上で生じた問題としてヒカキンさん達が顔加工しまくっててうまく認識されない問題があります。 例えば若干の変顔であればOpenCVの笑顔プリセットで認識してくれます。 ですが↓のようにめちゃくちゃ加工してしまうと認識できないor誤認識してしまうんです。 このことから認識できない場合が多いことが予想されるので比較的補正のかかってない過去のサムネイル画像を投稿する仕組みを導入しました。 皆さんも是非見てみてください。そしてヒカキンさんセイキンさんすみませんm(_ _)m https://twitter.com/SYM_HIKA_SEI 諸連絡 動作に関する不具合やご要望がありましたら@tomox0115までメンション飛ばして教えて下さい。すぐ対応します。 【ブログ】https://0115765.com/ 【Twitter】*@tomox0115

やりたいこと 自分のホームページを Twitter で宣伝したい。 そのときに Twitter カードという形式で表示したい。 また、表示する画像を幾つか用意して、同じサイトでも違う画像で表示したい。 どうすれば良いのか？ まず、Twitter カードの設定が必要。 下記の meta タグを<head></head>のなかに入れます。 <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@safetyinternetz" /> <meta property="og:url" content="http://safetyinternet001.ddns.net/" /> <meta property="og:title" content="安全にインターネットを楽しもう" /> <meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" /> <meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/001.jpg" /> 一つ目が、大きなカードで表示。 二つ目が、自分の Twitter アカウント 三つ目が、ホームページのアドレス。 四つ目が、タイトル。 五つ目が、HPの要約。 六つ目が、Twitter にアドレスを貼ったときに表示される画像。この画像部分を動的に変更したい。 ちなみに画像のパスは、相対パスではなく絶対パスで記述する必要があります。ご注意を。 この情報が入ったホームページを作成し、Card validatorというサイトで登録してみましょう。URL を入れて、Preview cardを押すと、URL を貼ったときに、どのような画像が表示されるかがわかります。 で、画像が 1 つだけの場合はこれで良いんですけど、複数の画像をひとつのサイトにつけたいときに少々問題があるわけです。 もともと svelte でつくったサイトで、svelte で動的に変えてもダメでした。 仕方なく php で変更することに……。 PHP で何をすれば良いのか？ OGP は、同じ URL ではひとつの画像しか生成されません。 よって異なる URL として認識させた上で、その URL に応じて画像を設定できればいいわけです。 つまり、http://safetyinternet001.ddns.net/?id=001 このときに 001 の画像を表示し、http://safetyinternet001.ddns.net/?id=002 このときに 002 の画像を表示すればいいわけです。 冒頭に下記のようなコードを入れてみましょう。 <?php if(!$_GET){ $id = '001'; } else { $id = $_GET['id']; } ?> PHP には詳しくないので動くだけのソースですが、GET で ID のパラメータがなければ自動的に 001 を設定、もしパラメータがあれば$idという変数に 002 とか 003 の数値が入るわけです。 さらに、さきほどの head 部分を少し変えてみましょう。 <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@safetyinternetz" /> <meta property="og:url" content="http://safetyinternet001.ddns.net/" /> <meta property="og:title" content="安全にインターネットを楽しもう" /> <meta property="og:description" content="美少女の画像、動画を安全に楽しむ方法をお伝えします。" /> <meta property="og:image" content="http://safetyinternet001.ddns.net/images/card_images/<?php echo "$id"?>.jpg" /> まあ画像のアドレスを id という変数にしただけです。 これで、さきほどのCard validatorでhttp://safetyinternet001.ddns.net/?id=201などを入れてみたら、201 の画像が表示されます。 あとは何かしらでhttp://safetyinternet001.ddns.net/?id=001～240とか、自分の用意した画像の分だけアドレスを作成し、BOT に突っ込めば URL を投稿したときに自動的に異なる画像が表示されるようになります。 僕が使っている BOT サービスはBot Birdです。 id=001とかの部分は、好きなようにつくっていいと思います。 僕は無骨に node.js で書いてみました。 const R = require("ramda"); const fs = require("fs"); const rangeArray = R.range(1, 243); console.log(rangeArray); const zeroPaddedArray = rangeArray.map((item) => item.toString().padStart(3, "0")); const write = (item) => { fs.appendFileSync( "./out.text", `http://safetyinternet001.ddns.net/?id=${item}` + "\n", (err) => { if (err) throw err; console.log("text追記"); } ); }; zeroPaddedArray.map((item) => write(item)); 普通に画像の個数（今回は 243 個）分の配列を作成し、padStartでゼロ埋めをし、テキストファイルに書き出すだけです。 ここで 243 個と画像が決まっていれば、php のほうで 243 以上の数字、あとは他の文字列だったら 001 にするとか、そういう処理を入れてもいいかも。 そんな感じで、1 時間に 1 回、違う画像で自分のホームページを Twitter で宣伝できるようになりました。

phpとは サーバーサイド側のプログラミング言語。 JavaScriptはフロント側の言語。 DBの内容を入力したり更新したりするのに裏側で動いている言語ってことだな... Laravelとは MVCのWebアプリケーション開発用のオープンソースフレームワーク。 php使ってWebアプリ構築する際に使えるフレームワークの一種ですね... Laravel構築の方法 phpのパッケージインストールソフト"Composer"が必要（例の指揮者的なアイコンのアレですね...わかります...） composerのインストール方法はこちらから （WinとMacでインストール方法が違います。そこら辺もdocumentを見てください...） Macならターミナルで、 composer create-project laravel/laravel project名 --prefer-dist "version指定" 「project名」と「version指定」の部分はお好きな名前、versionを指定してください。 project名が全体のディレクトリ名になります。 versionを指定しない場合、最新版が勝手にインストールされます。 動作確認 動作テストをするLaravelのディレクトリ上で、 php artisan serve を入力→簡易サーバーが立ち上がります。 artisan神か webブラウザでlocalhost:8000を使えば、、、 こんな感じに表示されました。（version6.xの場合） 使用感 Laravelを少し触り開発をした感想としては、phpで細かくバリデーションする必要もないし、bootstrap4などのフロント側も様々なフレームワーク？があり使いやすいかと思う。 php初学者なので、ここから色々触っていきたいと思います！！ →もっと面白みのある記事書きたいですね...

目標 Laravelのインストール MySQLのインストール ログイン機能の実装 Laravel v8.40(最新:2021年5月4日時点)のartisanコマンドでサーバーを立ち上げ、 データベースを作成しログイン機能を実装します。 前提条件 composer (v2.0.13) PHP (v8.0.3) Homebrew (v3.1.5) 自身の環境では、以上のツールとバージョンをインストールしています。 まだ、インストールされていない方・バージョンが古い方は、 事前にインストール・アップデートを済ませていただきますようお願いします。 Laravelのインストール それでは早速、実装していきましょう！ まずは、以下ディレクトリ内でcomposerコマンドを使用し、laravelをインストールします。 /Users/user Users-PC:~ user$ composer create-project laravel/laravel laravel インストールしたlaravelディレクトリに移動し、 artisanコマンドを使用することでversion確認をすることができます。 /Users/user/laravel Users-PC:laravel user$ php artisan -v Laravel Framework 8.40.0 laravelディレクトリ直下でサーバーを起動します。 /Users/user/laravel Users-PC:laravel user$ php artisan serve 以上で、laravelがインストールされたのページにアクセスすることができます。 http://localhost:8000/ MySQLのインストール 続いて、MySQLをインストールします。 好きな場所でHomebrewを活用し、mysqlをインストールします。 Users-PC:laravel user$ brew install mysql 以下コマンドでmysqlファイルのインストール先を確認することができます。 Users-PC:laravel user$ which mysql /usr/local/bin/mysql 今回/Users/user/laravel/.envファイルの中では、 データベース名は「laravel」で初期設定されているため、 MySQLに「laravel」という名前のデータベースを追加します。 .env DB_DATABASE=laravel 因みに、ls -aというlinuxコマンドを使用することで .envファイルの存在を確認することができます。 /Users/user/laravel Users-PC:laravel user$ ls -a . .env .gitignore app composer.json database package.json resources storage vendor .. .env.example .styleci.yml artisan composer.lock node_modules phpunit.xml routes tailwind.config.js webpack.config.js .editorconfig .gitattributes README.md bootstrap config package-lock.json public server.php tests webpack.mix.js laravelディレクトリ直下でmysqlコマンドを使用し、mysqlにアクセスします。 /Users/user/laravel/ Users-PC:laravel user$ mysql -uroot SQL文でlaravelというデータベースを作成します。 mysql mysql> create database laravel; Query OK, 1 row affected (0.00 sec) SQL文でlaravelというデータベース名があることを確認できます。 mysql mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | laravel | | mysql | | performance_schema | | sys | +--------------------+ 5 rows in set (0.00 sec) 以上でmysqlの設定は終わりです。 しかし、このままページにアクセスした際に.envに記述されているDB_HOST名に誤りがあるため、 以下のようなエラーメッセージが出てしまいます。(正式にいうと誤りではありませんが、接続方法が異なります。） SQLSTATE[HY000] [2002] Connection refused .envファイルのDB_HOST名を127.0.0.1 → localhostに変更します。 localhost・・・ソケットファイルを使用した接続 127.0.0.1・・・TCP/IPを使用した接続 .env 変更前 DB_HOST=127.0.0.1 変更後 DB_HOST=localhost .envファイルやconfig/*.phpファイルを編集した際には、 必要に応じてartisanコマンドを活用し変更した設定を反映させましょう。 (過去に数時間悩んだエラーが、これらによって解決したこともあるため、覚えて損はないかと思われます。) php artisan config:cache php aritsan config:clear php artisan cache:clear php artisan route:clear php artisan view:clear /Users/user/laravel Users-PC:laravel user$　php artisan config:cache jetstreamのインストール&ログイン機能実装 最後に、jetstreamのパッケージをインストールしてログイン機能を実装していきましょう。 それではまず、composerのjetstreamのパッケージをインストールします。 /Users/user/laravel Users-PC:laravel user$　composer require laravel/jetstream artisanコマンドでjetstreamをインストールしましょう。 jetstreamでは、「livewire」と「inertia」のパックを選択してインストールすることができます。 livewire これまでのlaravelのbladeを活用するパック inertia Vue.jsやReactといったjavascriptを活用するパック 今回当方では、inertiaをインストールしていきます。 /Users/user/laravel Users-PC:laravel user$　php artisan jetstream:install inertia jetstreamのインストールが完了したら、npmをインストールしてビルドしていきましょう。 /Users/user/laravel Users-PC:laravel user$　npm install && npm run dev 最後にartisanコマンドを実行し、データベースにテーブルを挿入していきましょう！ /Users/user/laravel Users-PC:laravel user$　php artisan migrate Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (14.84ms) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (8.38ms) Migrating: 2014_10_12_200000_add_two_factor_columns_to_users_table Migrated: 2014_10_12_200000_add_two_factor_columns_to_users_table (8.48ms) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (9.86ms) Migrating: 2019_12_14_000001_create_personal_access_tokens_table Migrated: 2019_12_14_000001_create_personal_access_tokens_table (14.20ms) Migrating: 2021_05_03_160333_create_sessions_table Migrated: 2021_05_03_160333_create_sessions_table (19.12ms) 上記のようにphp artisan migrateが実行できれば、恐らくログイン機能が実装できていることでしょう！ 右上にLogin / Registerが表示されていれば成功です！ ご拝読ありがとうございました！ もし、参考になった方がいらっしゃいましたらLGTMボタンのクリックをお願いします！