画像ファイルのアップロードと保存範囲のトリミング（twitterみたいに）
Twitterのプロフィール画像の変更のように、ユーザが自分の写真やトップアイコンをアップロードして、そのタイミングでweb上でトリミング(保存範囲指定)できる機能がやってみたくていろいろと調べてたら以外に簡単にみたいなのでメモ
■使うライブラリ
・jQuery File Upload
・Jcrop
blueimp.github.io
Jcrop - Deep Liquid
■サーバ側
php Laravel5
■シーケンス
■方法
$(function () { var url = '/xxx/post'; $('#fileupload').fileupload({ url: url, dataType: 'json', maxFileSize: 5000000, done: function (e, data) { $.each(data.result.files, function (index, file) { /*画像のUPが成功したら呼ばれる*/ /*以下は適当に*/ var span = document.createElement('span'); span.innerHTML = ['<div class="frame_img"><img src="', file, '" id="select_target" /></div>'].join(''); //前回の追加エレメント削除 var element = document.getElementById("files"); while (element.firstChild) { element.removeChild(element.firstChild); } document.getElementById('files').insertBefore(span, null); $('#file_name').val(file); }); //選択枠をロード loadjcrop(); } }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); /* トリミング jcropの初期設定 */ function loadjcrop(){ var img = $('#select_target'); $(img).Jcrop({ aspectRatio: 1, onSelect: updateCoords, /*コールバック*/ setSelect: [0, 0, 200, 200], /*初期設定のトリミング枠*/ minSize: [200, 200], /*トリミング枠の最小サイズ*/ allowResize: true, allowSelect: false, boxWidth: 500, bgColor: 'white', }); } /* トリミング枠を変更するたびにこれがコールバックされる formの隠しパラメータを上書きする */ function updateCoords(c) { $('#user_img_x').val(c.x); $('#user_img_y').val(c.y); $('#user_img_w').val(c.w); $('#user_img_h').val(c.h); } </script>
javascript側でやることは
1,画像ファイルを非同期でサーバにアップ
2,アップ後ブラウザに表示、jcropをでトリミング枠を作成
3,トリミング枠を変更するたびにformのパラメータを随時更新
開始点(x,y) 幅高を更新する
■html側
かなり端折ってますがこんな感じ。
<span class="btn btn-default fileinput-button"> <span>画像選択</span> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="files[]" multiple > </span> <!-- form --> <form action='/setting/user/user_img/post' method="post"> <input type="submit" class="btn btn-default" value='変更'/> <input type="hidden" name="user_img_x" value="" id='user_img_x'> <input type="hidden" name="user_img_y" value="" id='user_img_y'> <input type="hidden" name="user_img_w" value="" id='user_img_w'> <input type="hidden" name="user_img_h" value="" id='user_img_h'> <input type="hidden" name="img_url" value="" id='file_name'> </form>
見た目はこんな感じになります。
右側が動的に画像をロードしてトリミング枠を編集します。
■サーバ側
省きますがformのパラメータを参考にサーバ側で一時保存の画像を編集します。
楽天モバイルのSIMカードをGET
物事は形からということで、今作成しているwebサービスの開発を効率的にするために新しい携帯を購入しました！！
というのはウソでTacebook, Twitterのディベロッパー登録したかったのでデータSIMカードを新しく1つ購入してみました。
今、FacebookやTwitterのアプリ開発にはSMS認証が必要になります(めんどくさい)
ぶっちゃけ、今持ってる携帯の番号使えばいいんですが、他にも遊びでtwitterのアプリとか作成してたんできちんとアカウントを分けようと思いSMS番号欲しさにSIMカードを購入してみました。
とりあえず、何個かMVNO(格安SIM会社※)を見てみて、値段もさほど大差なく楽天カード持ってたんで楽天モバイルの3.1G SMSあり、1020円を契約してみました。
※MVNO：仮想移動体通信事業者
申し込みして3日ぐらいで届きました。昨日京都遊びに行って帰ってきたらとどいた～って感じ。
とりあえず手持ちのNexus5に際してみてちょちょいと設定してみたらデータ通信はOK、Twitter
、Facebookのディベロッパー登録でSMS認証もOK
手持ちでauのHTC ISW13HTを持ってるけど、こっちは裏技使えばSIMカード使えるという情報をちらりと見かけました。 今度時間ある時に挑戦。
■めちゃくちゃ焦ったこと
SIMカードが届いてとりあえず動作確認しようと開封したらSIMカードにmini-UICCと・・・Nexus5はmicro sim間違えた型のSIMカードを購入してしまった！！ めちゃくちゃ焦って速攻で楽天モバイルのサポートセンターに電話。 結果mini-UICC = micro SIMとのことです。SIMカードのタイプ選択ミスったのかと思ったわ・・
■通信速度
大阪の少し田舎の方で平日昼間に体感で秒速200～400kbぐらい。遅すぎ。
なんか夜の方が早いと情報もあったので夜にでももう一度試してみます。
ぶっちゃけ下りの実測の通信速度はこの程度と思っていましたが、日本政府は速度表記取り締まる法律を作ってほしいです。ベストエフォートうんちく言っても合法的な詐欺まがいの商法だよな～と。通信価格が安くなって競うところがサービス、速度になってきてるのは何となくわかるけどもう少し空気読んでほしいです。
そこそこコアユーザーが知りたいのは、
・実測の通信速度
・通信速度規制の制限
・使用できる範囲
・ベストエフォート
・親キャリア
特に上2つを知りたいのに、これが一番分かりにくい場所に表記されているんだよな～
暇なんで京都に来てみた。 20歳に戻りたいｗ
最近働いてたとき以上にコーディングしている気がする。
家や近所のカフェで作業してるとさすがに疲れてきたんで、ふと京都まで一泊で散歩にきました。
それでも、今日は京都のスタバとマクドで陣取ってコーディングしてた。明日は久々にのんびりと京都観光いこう。
京都といえば意外とラーメン店がおおいんで嵐山で温泉入って22時ぐらいにあいてるラーメンや探して有名？な高安でラーメン食べてたけど、おいしい♪ ただ美味しいより客層が20代しかいない。 ここって京大の近くだったような気がするけど、ほんと20代の客しかいないｗ うらやましいｗ
なんか20歳に戻りたくなってきた！！
Zortrax出力動画を作成してみた
前からやってみたかったこと。
ちょうど家にソニーのアクションカム(HDR-AS100V)があるんで、撮影して10倍速ぐらいに編集してみたかったんですが、忙しくて(ニートですが・・)なかなかやる機会がありませんでした。
とりあえず、引越しの時にどこかの段ボールに封印してたアクションカムと三脚を1時間かけて探し当ててセット。 出力するのは流石にネットで拾ってきたものだとマズイとおもうのでスクラッチで作成したタヌキのフィギュア。 昼から夕方にかけては喫茶店でweb開発の開発してるんでその間に撮影することにしました。
HDR-AS100Vは広角の150°と狭角の120°の2種類が設定でき、120°の狭角で撮影してみましたが、これでもかなりの広角ですね。撮影したのがアクションカムなので仕方がないと思います。
・HDR-AS100V
解像度：1280×720 最高解像度
撮影時間：約3時間30分
編集ソフト：AviUtl(再生速度を16倍にして再エンコード)
・追伸
動画編集とか生まれて初めてやりましたが、AviUtl使って簡単にできました。
ネットで調べればほとんど解決する現在・・・素晴らしいです♪
あとHDR-AS100Vの撮影時間が3時間半ほどかかったんで、動画サイズが合計9G以上になりました。
SDカードのフォーマットかハードに仕様か1動画のファイルサイズの上限が4Gでこの動画を結合、再生速度編集とか結合にめちゃくちゃ時間かかりました。 今手元にSDカードありませんが、FAT32でフォーマットしてたのかな？？
新型デミオの燃費
去年の12月に新型デミオを購入して、5か月ですでに9000キロほど運転してます。
仕事辞めて、長野や香川、大阪<->東京を行き来したりしてたら、気づけば9000キロ運転してました。
それで気づいたのが、けっこう燃費がいい！！
2週間ほど前に大阪<->東京を往復した時の平均燃費が26km/L ディーゼルがガソリンの2割安と考えればガソリン計算で31.2km/L
そこらへんのハイブリッドより燃費がいい！！
東京<->大阪は基本下道で、高速に乗った距離は200キロぐらいです。夜中も走ってバイパスもあり、そんなに渋滞にも引っかかりませんでした。
通常利用で渋滞が多い市内地で平均燃費を測定したら15～18km/Lぐらいでした。
高速で80Km/hのクルコンで30km/Lいきます。
マツダコネクトｗ以外は大変満足しています。
帰宅後少し市内を走ったので25.8km/Lまで下がりました
Laravel のLogデバック出力 結構便利
Laravelの勉強を兼ねて開発をは初めて2週間、LaravelのDebugbarによるログ出力が便利でSQLのクエリログを見たり、取得配列のを列挙してみたい何かと重宝するのでメモ。
Laravel5では標準でDebugbarが入っていないのでcomposerでインストール。
コマンド： composer require barryvdh/laravel-debugbar
次にconfig/app.phpで以下の行に追加
・providers
'Barryvdh\Debugbar\ServiceProvider'
・aliases
'Debugbar' => 'Barryvdh\Debugbar\Facade'
デバッグモードをONにしないと出力されないので
'debug' => env('APP_DEBUG'), を 'debug' => true, に修正
環境変数を正しく設定すれば開発環境ではデバッグモードON、リリース環境ではOFFとかできるはずなのですが、今は強制的にONに指定
後はコントローラなどのでログを出力したい箇所で"Log::info()"を使うとブラウザ上の下部にログがGUI出力されます。SQLのクエリーや配列が簡単に確認できるのでかなり重宝します。
例えば、取得したユーザデータの連想配列を画面上に表示できます。
$user_array = User::get(); //userテーブル(Model)の一覧取得
Log::info($user_array);
・開発環境
Laravel5
PHP 5.6.8
気分転換でzortrax使って熊を出力してみた
Web作成で忙しく、少し疲れたんで気分転換しようと、ネットで拾ってきた可愛いクマさんの3Dデータを出力してみた。
Zortrax M200 やっぱり綺麗っす。 ただ下面は少しフィラメントの跡がちょっと気になるなぁ～
