LINE Flex Messageに画像を使いたいだけなのに、なぜこんなにめんどくさいのか
「画像のURLを入れてください」
LINE Flex Messageを作ったことがある人なら、この壁にぶつかったことがあるんじゃないだろうか。
Flex Messageに画像を入れようとすると、JSONの中に画像のURLを書く必要がある。しかもHTTPSじゃないとダメ。つまり、画像をどこかのサーバーにアップロードして、公開URLを発行しないといけない。
「え、画像を使いたいだけなのに、サーバー？」
そう。普通にスマホやPCに保存してある画像をそのまま使えるわけじゃない。ネット上のどこかにHTTPSで公開されている画像のURLが必要になる。
これ、エンジニアにとっては当たり前のことかもしれないけど、素人にとってはかなりのハードルだ。
素人が詰まるポイント
実際、自分がつまずいたポイントを振り返ると、こんな感じだった。
「画像のURLってどうやって作るの？」
まずここ。普段使ってる画像ファイルにURLなんてない。ローカルのファイルパスはURLじゃない。じゃあどうするのか。GoogleドライブやDropboxに置いてリンクを取得する？それだと直リンクにならなかったり、HTTPS対応してなかったり、LINEの仕様に合わなかったりする。
「画像をサーバーに置くって、サーバーって何？」
じゃあサーバーに置こう、と思っても、そもそもサーバーってどうやって用意するのか。VPS？AWS？レンタルサーバー？FTPでアップロード？SSHって何？素人にとっては選択肢が多すぎて、どこから手をつけていいかわからない。
「やっとアップロードできたけど、URLがわからない」
仮にサーバーにファイルを置けたとしても、そのファイルの公開URLがどうなるのかがわからない。ドメインとディレクトリ構造の関係を理解してないと、正しいURLにたどり着けない。
たかが画像1枚使いたいだけなのに、やることが多すぎる。
だから作った。画像サーバーを。
素人だからこそわかる、素人が詰まるポイントを全部潰したシステムを作ることにした。
やりたいこと： 画像をドラッグ＆ドロップして、URLをコピーする。以上。
技術的なことは全部裏側に隠す。サーバーの構造もディレクトリも気にしなくていい。ブラウザで管理画面を開いて、画像を放り込んで、出てきたURLをコピーするだけ。
専用のサブドメインを取得して、そこで画像サーバーを動かしている。
仕組み
技術的な話に興味がある人向けに、中身を軽く紹介しておく。
サーバー構成
共用レンタルサーバーを使っている。VPSじゃなくて共用サーバーにしたのは、PHPがそのまま動くし、SSLも無料で使えるから。素人がインフラで消耗しないための選択。
技術スタックはPHP + Apache + HTML/JSというシンプルな構成。
アップロードの流れ
- ブラウザで管理画面にアクセス
- パスワードでログイン
- 画像をドラッグ＆ドロップ（最大10枚同時）
- 自動でリサイズ・圧縮される（1000KB以下に最適化）
- HTTPS公開URLが発行される
- ワンクリックでURLコピー
- LINE Flex Messageに貼り付け
対応フォーマットはJPEG、PNG、GIF、WebP。アップロード上限は20MB。
自動リサイズ・圧縮
LINE Flex Messageで使う画像にはサイズの制約がある。デカい画像をそのまま使うと表示が遅くなるし、そもそも読み込まれないこともある。
だから、アップロード時に自動で処理が入るようにした。
- 1920px以上の画像は自動で縮小
- JPEG/WebPは品質90から段階的に下げて、1000KB以下になるまで圧縮
- PNGの透過やWebPのアルファチャンネルはちゃんと維持
ユーザーは何も考えなくていい。画像を放り込むだけで、適切なサイズに最適化される。
セキュリティ
画像サーバーとはいえ、誰でもアップロードできたらまずい。
- パスワード認証（ブルートフォース対策で5回失敗したら5分ロック）
- Cookie設定はHttpOnly / Secure / SameSite
- CORSは自分のドメインのみ許可
- アップロードフォルダではPHP実行を禁止（悪意あるスクリプトの実行を防止）
- ファイル名はランダム生成（元ファイル名を使わない）
- MIME検証で拡張子偽装もブロック
素人が作ったとは思えない？ AIパワーです。
もしこれを外注したら
機能としてはシンプルだけど、認証・ファイルアップロード・画像処理・セキュリティ対策・SSL対応と、地味にやることが多い。
同等のシステムをフリーランスに外注したら、おそらく20〜50万円くらい。サーバー構築やドメイン設定、セキュリティ対応込みだともう少し上がるかもしれない。
開発会社に頼むと50〜100万円は覚悟した方がいい。
それを、素人がAIと一緒に1日で作った。
素人が作るからこそ見える景色
エンジニアにとっては「画像をサーバーにアップロードしてURL取得」なんて、日常的な作業だと思う。息をするようにできることだろう。
でも素人にとっては、それが最大の壁になる。
今回作ったのは、技術的にはそこまで複雑なものじゃないかもしれない。PHPのファイルアップロードとGDライブラリによる画像処理。やってることはシンプルだ。
でも大事なのは「何を作るか」を考えられたこと。自分が困ったことを、自分で解決した。素人が詰まるポイントを知っているのは素人だけ。そしてAIがあれば、素人でも素人とは思えないクオリティで解決できる。
今後やりたいこと
- フォルダ分けやタグ管理（画像が増えてきたら整理したい）
- URL短縮やQRコード生成
- 画像URLの一括コピー（Flex Messageで複数画像を使うとき用）
まだまだ発展途上だけど、「画像をアップしてURLをコピーする」という最低限の目的は完璧に達成している。
素人にこそ読んでほしい。「画像のURLってどうやって用意するの？」で止まってるあなた、AIと一緒に自分で作れます。