通常、Googlechrome上でweb上の画像を右クリック、PCに保存。自分のブログにアップロードという流れを
ほとんど右クリック一発で、アップロードまで行うというプログラムの開発を目指しています。
そのうちの、chrome上で得たURLをPHPファイルに送って、そこで投稿という事を想定しています。
様々な言語で様々な方法があると思われるのですが、
私の調べて進めた作成途中の方法では、言語で、
javascript、jquery、PHP、あたりでこれらはできるのかと予測をしつつ、進めております。
既存のこれらのものを検索してみますと、一発ではてなフォトにアップロードしたり、一発でDropboxへ、などあるようでしたが、
自分のブログにアップロードするものは見当たらず、
これが出来たら、ブログの記事装飾も格段と早くなると考え、どうしても作成をしたいと思っております。
画像自体はもちろん無料素材等の問題ないものです。
以下はまず、Chromeの右クリックうんぬんでなく、
javascript、jqueryから、POSTしてちゃんとPHPにデータが渡っているかどうかを模索しました。
chromeから自分のPHPファイルに送信さえできれば、その変数を画像投稿でもなんでも使えるので、まずはuseridの値やpasswardの値さえ送ることができれば、と思いました。
【私のレンタルサーバー上のindex.html】 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $.ajax({ url:'~~~上記と同様の私のレンタルサーバー上のPHPファイルのURL~.php', type:'POST', data:{ 'userid':'aaaaaaaa', 'passward':'bbbbbbbb' } }) // Ajaxリクエストが成功した時発動 .done( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが失敗した時発動 .fail( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが成功・失敗どちらでも発動 .always( (data) => { }); </script>
【~~~私のレンタルサーバー上のPHPファイルのURL~.php】 <?php if (isset($_POST['userid'])) { $bbbb = $_POST['userid']; } ///////////ここに$bbbbをphpmyadminに挿入するような処理を記載。 成功なのでデータ送信も成功している。ブログへの画像投稿も送信がしっかり成功すれば成功するはずである。 ?>
まず上記では成功しているので、単なるhtmlファイル(javascript,jquery)、PHPファイルではデータは技術的にはミスはないと考えました。
続いてchrome拡張機能の開発ですが、
【manifest.json】 { "manifest_version": 2, "name": "mission", "version": "2", "browser_action": { "default_popup": "popup.html", "default_icon": "33.png", "default_title": "Hello" }, "background": { "scripts": ["background.js","jquery-3.1.1.min.js"] }, "permissions": [ "contextMenus", "tabs" ], "icons": { "16": "33.png" } }
popup.html、pngファイル、同一フォルダに取り込んであるjquery-3.1.1.min.js等々はおいておきまして、
background.jsは以下です。
background.js chrome.contextMenus.create({title: "hoge", "contexts":["image"],onclick: hoge}, function(){ alert("コンテキストメニュー登録完了"); }); function hoge(){ $.ajax({ url:'~~~私のレンタルサーバー上のPHPファイルのURL~.php', type:'POST', data:{ 'userid':'aaaaaaaa', 'passward':'bbbbbbbb' } }) // Ajaxリクエストが成功した時発動 .done( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが失敗した時発動 .fail( (data) => { $('.result').html(data); console.log(data); }) // Ajaxリクエストが成功・失敗どちらでも発動 .always( (data) => { }); };
これで、データはPHP側にはいかないのですが、
どうすればよろしいでしょうか;;申し訳ありません;宜しくご指導願います!!
回答1件
あなたの回答
tips
プレビュー