---

今日の目標は表題の通りです。「画像登録システム」です。


Livvonでも画像の登録ってのはいくつかのフェーズで必要になります。部屋の画像登録であったり、プロフィールのアイコンだったり。いや、ほんとはこれ顔写真にしようかとも思ってるんですけどね。Airbnbにならって。まぁ一応ね･･････。顔認証とかできんもん･･････笑

データの扱い方としては、手抜きでbase64に変換してデータベースに直接ぶっこむっていう方法をとろうと思ったんですがこれが非常にマズいらしいのでやめます。必要以上に容量を食いつぶすみたいなので、将来性がないんですね。最初のうちはいいけど。


どうしようか悩んだんですが、ランダム文字列を生成して、それをURLとして外部ファイルを参照するという仕組みにしようかなと思います。画像はjpg固定でいいでしょ。pngぶっこまれても登録時にjpgに変換すればよきでしょう。
この仕組のメリットとしては、フォルダ丸ごとどっかのストレージに移動しても対応可能ってとこですかね。というかそれを見越した設計にしましょう。AmazonS3とかね。

ただ、アイコンと部屋画像でフォルダはわけときましょうか。ややっこいし。


画像のアップロード自体はAnonymousでやってたんですが(記事はわかんない笑)、どうせ車輪の再発明とかやってるので今回は大人しくライブラリ使いましょう。
単にアップロードするだけではなく、以下の仕様に対応させます。

・png,jpgを許容する。
・規定サイズの画像を生成する(正方形とXGAサイズ？)
・ブラウザ上で取り込み範囲を指定可能

ぶっちゃけanonymousでやったことと一緒なんだよなぁ...
pngからjpgの変換も一瞬で終わるみたいですしね。ただ、画像の切り抜き辺りは結構難儀しそーですね。


なんかないかなーって思って探してみたらJcropってのを使えば良さそうですね。
幸運なことにLaravel5.3で動かしてるらしいので、コピってくれば使えそうですね。


ただ、大概の例では一時アップロード領域を確保して･･････ってプロセスを踏んでいますが、その一時アップロード領域の整理がめんどくさそうなので、プレビュー表示時ではBase64エンコードしたものを表示させたいですね。
だったら、入力された画像を文字列変換してキャンパスに描写すればいいだけですしね。まずそれをやりましょうか。あっ、こんなんあるやん。あっこれもいいな




で、結局Anonymousとほぼ同じのcropboxに行き着きましたとさ････････････。



コードは別に出す間でもない感じはするので載せません(笑)
採用した大きな理由としては、ブラウザ側で画像を処理してもらえる･･････つまり一時ファイルのアップロードが不要なものってのが最優先でして、その中でうまく動いてくれたのがこいつだけだった、っていう･･････。
それをちょこちょこっとカスタマイズして使うことにしました。どこいじったっけな、既にプロフィール画像が設定されてたらそれを初期値として読み込む動きと、あと決定ボタンを押したらモーダルが開いて確認画面が出るようにした、ってとこかな。



まあこんな感じにね。


ほんとはファイルのドラッグ＆ドロップを実装したかったんですが、いい感じに動いてくれないし、その原因がどうやらinputのtype=fileはスクリプトから弄れないようになっているというものっぽいので、ちょっとこれは骨が折れそうな作業だということで諦めました･･････。
別のロジックを使えば実装できたんですけど、そうすると今度はcropの方がうまくいってくれなくてですね･･････。自前で実装すればいけると思うんですけど、明らかにしんどそうなのでいやです(笑)



ほんとは今日中に「全体的な仮デザイン」を決めたかったんですけど、無理ですね。全然思いつきません。
β版公開時点でもうほぼ本番みたいな動きをする予定でいるので、あんまり手は抜けないんですけど、やっぱ僕にはデザインセンスがない･･････。なにもわからない･･････。どうしたらいいかわからない･･････。



一応いまこんな感じです。タブなんか使っちゃっておしゃれでしょ〜〜〜笑


ほんとどうしようか悩んでるんですが、一個一個に編集ボタンつけるとどうもデザインが雲古っぽいので、ちょっとInstagramあたりからデザインパクってこようと思います（）


とりあえず今日はやる気なくしたからかえる。朝からやっててしんどい･･････。デザインきらい･･････CSSきらい･･････。