こんにちは。ぬこすけです。
Twitter や Facebook, Line など日常的に SNS を使うことは多いでしょう。
とりわけ、写真を共有する場合はインスタグラムを使うことも多いのではないでしょうか。
私もインスタグラムを使っていて、美人なお姉さんの写真を眺めたり、芸術作品と称するクソ落書きをアップしていたりします。
インスタグラムは「#猫」のようにハッシュタグをつけて写真を投稿することができ、ユーザーはハッシュタグを使って写真を検索することができます。
もちろん、「#cat」のように英語でハッシュタグをつければ世界の人向けにも写真を共有できたりします。
もし自分の写真を海外向けに発信したいとき、イチイチ翻訳してハッシュタグを作っていては面倒です。
英語ならまだしも、韓国語や中国語になるとなおさらです。
このような問題を解決したく、「Instagram Hashtag Translator」というサイトを作ってみました！
どんなサイト？
ハッシュタグとして投稿したいワードを入れるだけで自動で翻訳し、即コピペできるようにハッシュタグを生成する サイトです。
例えば「猫」と「カフェ」という２つのワードをハッシュタグにして英語圏の人にも写真を発信したいとしましょう。
この場合、Instagram Hashtag Translatorを使えば次のようにハッシュタグを生成することができます。
- Input：
猫 カフェ - Output：
#猫 #カフェ #cat #cafe
Output で出力されたハッシュタグはそのままインスタグラムの投稿にコピペすることができます！
企画の背景
ある日、いつも通りインスタグラムで美人なお姉さんの写真を眺めているとあることに気づきました。
そう、外国語のハッシュタグをつけて投稿されていることに。
私自身も写真の投稿に英語のハッシュタグをつけるのですが、やはり1つ1つのワードを翻訳したり入力したりするのが面倒。
エンジニアなんだからテクノロジーで問題解決しようぜってことで作っちゃいました。
技術スタック
Next.js でフロントもバックエンドも開発し、 Vercel でデプロイしています。
フロントエンド
フロントエンドでは海外の人でも使えるように i18n 対応もしています。
Next.js を使えば手軽に i18n 対応もできる のでおすすめです。
また、問い合わせフォームを実装していますが、 Formspree という Vercel の integrations で公開されているサービスを使って実装しています。
Formspree は 月 50 件までなら無料でフォームをさばけます。
実装も @formspree/react というライブラリを使って手軽に実装 できたり、 formspree.json という設定ファイルでフォームの各項目や送信先のメールアドレスなどを簡単に定義 することもできます。
{
"forms": {
"contact": {
"name": "Feedback",
"fields": {
"message": {
"type": "text",
"required": true,
"min": 1
}
},
"actions": [
{
"type": "email",
"to": "instagram.hashtag.translator@gmail.com"
}
]
}
}
}
バックエンド
バックエンドでは ユーザーが入力したワードの言語判定 や 翻訳 をしています。
ユーザーが入力したワードの言語判定というのは、例えば次のようにユーザーが英語のハッシュタグを生成したいと考えてワードを入力してきたとします。
猫 cafe
この場合、翻訳すべきワードは猫だけです。
ユーザーから送られてきたワード1つ1つが何の言語はわからないため、バックエンドで franc というライブラリを使って言語判定しています。
また、サービスの肝となる翻訳は皆さんお世話になっている DeepL と、意外な登場人物 Google Apps Script（GAS） さんです！
DeepL は無料枠で1か月に500,000文字まで翻訳が無料 です。
さらに 無料枠超えたら自動課金もないので、個人開発ならおすすめ です。
GAS も自前で実装は必要ですが、無料で翻訳することができます。
GAS で用意されている LanguageApp.translate を使えば翻訳することができます。
もちろん制限はありますが GAS 自体が無料で使えるので、 LanguageApp.translate を使って自前で API を実装すれば無料翻訳が可能です。
Instagram Hashtag Translator の GAS では TypeScript による記述や Webpack によるバンドル&ミニファイ、 clasp と GithubActions による自動デプロイで開発しています。
clasp というライブラリは聞いたことがないかもしれませんが、 ローカルでの GAS の開発を可能にする便利なライブラリ です。
GAS で開発する際はおすすめライブラリです。
Instagram Hashtag Translator では基本的には DeepL で翻訳かまして、 DeepL が利用制限を超えたりサポート外の言語（韓国語）などの場合は GAS での翻訳を実行するようにしています。
このような DeepL と GAS と無料枠での運用により、翻訳を使えるのは1ユーザーあたり1日3回までの利用に制限しています。
どのくらいの開発期間？
ちょっとしたデザインとユーザーからの入力を元に翻訳してハッシュタグを生成するコア機能で大体5日で実装しました。
1日1~2時間くらいの開発だったので作業量でいうと1人日くらいです。
最初のデプロイも開発を開始してから5日で公開しました。
他の記事でも書いたのですが公開は早めにするように心がけています。
公開したのが 2022/06/09 なので運用は1ヶ月半くらいでしょうか。
他の開発もしたりしているので Instagram Hashtag Translator はたまーに細々と開発しています。
（このくらいのスピード感が重要）
今後どうする？
ボトルネックになってくるのは次の感じでしょうか。
- ユーザー数
- 1日3回の利用制限
- Vercel の無料プランが商用利用不可
まあなんといっても利用してくれる ユーザー数。
公開してから１ヶ月半、全然周知をしてこなかったこともあり、ユーザーはほぼいません。
また記事メディアのような SEO でガンガン流入させるような Web サイトでもないのでなかなか集客が難しいところです。
怪しまれる覚悟で近いうちにインスタグラマーに DM をガンガン投げてみるつもりです。
（インスタでこんなクソ落書きあげている時点で怪しまれそう）
次に1日3回の利用制限。
ユーザーの要望だったり使い方次第ではありますが、1日3回の利用制限もゆるくしたいなーとも思っています。
試算だと1日3回にすれば1日1700ユーザーは捌けるくらい余裕を持っていますが、いかんせんユーザー数も少ないのでデータもなく、また需要もあるのかもわからないのでひよってます笑。
DeepL と GAS での運用が苦しくなるのであれば他の API も活用したいところです。
あまりググっても記事は見かけませんが、個人的には libre というオープンソースに注目しています。
GCP や AWS、 Azure などにも無料枠で翻訳 API が使えますが、無料枠越えると自動課金なのがネックです。
（各 API のリクエスト回数を DB に保存すれば無料で運用もできそうですが）
libre はセルフホスティングする手間はありますが、 良い感じに無料のインフラと組み合わせて運用できないかなーと思っています。
最後に Vercel の無料プランが商用利用不可 という問題。
サクッとデプロイしたかったこともあり、脳死で Next.js と相性の良い Vercel にデプロイしました。
今のところ広告は掲載していませんが、いずれは広告貼ってマネタイズもしたいと思っています。
Vercel の無料プランだと商用利用ができないので、別のホスティングサービスに切り替える必要があります。
（ firebase や Netlify あたりかな？）
（Vercel の無料プランが商用利用不可については「グェェェ」という気持ち）
最後に
インスタグラムで海外向けに写真を投稿したい場合はぜひ「Instagram Hashtag Translator」を使ってみてください！
ついでに Follow Me!!