【アイディアをカタチに】個人開発でミニアプリを公開！企画〜リリースまでの流れを整理

はじめに

隙間時間でミニアプリをつくりました
企画からリリースの間まで、やってきたことの概要を記したいと思います。

例えば、このような・・・

「個人開発で使える何かいいツールはない？」
「アプリ開発に興味あるけど、どういう手順でつくるの？？」
「元々個人開発してるけど、他の人はどうやってつくっているの？？？」

お考えの方にとって参考になればと思っています

サービス紹介

Chick Chop　https://chickchop.tk/

チックチョップと読みます
「直接」を韓国語ではチクチョプといいますが、流行りのSNS名を組み合わせて、もじった名前にしました

動画

機能

日本語(ひらがな)を入力するとハングルに変換、コピーができます。
シンプルなツールです
日本語の自分の名前や固有名詞を変換したいときに使えるかと思います！！

想定されるターゲット

・自分の名前をハングルでどうやって書くのかを知りたい
・日本語をそのままハングルに書くとどう書くか知りたい
・翻訳サイトだと、固有名詞が綺麗に翻訳できなくて不満

このように考えている方に利用していただけるのではと思っています

※使い方やつくった思いは自分のブログでも説明させてもらっていますのでご興味ある方はどうぞー

期間と使用言語

期間

約1ヶ月の間、隙間時間(1日1~2時間+休日)でつくりました

使用言語・ツール

言語	ライブラリ等	サービス
HTML	Gulp	Git
Scss	Bootstrap	Github
	jQuery	Github.io
		Freenom
		Canva

静的なサイトとなります

企画〜リリースまでのステップ

企画

要件定義

• 類似サービスの調査

  • 多くないものの、既に同様のサービスが存在することを確認
    
  • どうやって差別化を図り価値を出していくかを企画する

• 必要な機能を整理

• 使えそうなツールの調査

  • 活用できるデザインテンプレートはあるか
    
    
    神様のようなサイトを見つけました
    
    
    https://freehtml5.co/
    
    
  • どこにデプロイするのか
    
    
    Githubpagesを使い、freenomで独自ドメインを無料で使うことにしました
    
    
    freenom

実装

1. ディレクトリ作成

   • テンプレート (FREEHTML5)を活用

2. 機能部分(主にjQuery)の実装

   • 入力した文字列を表示
   • 即時翻訳
   • コピーボタン作成
   • バリデーション(空入力時のアラート)
   • 入力した文字列を表示

   あたりを調べて実装しました

3. マークアップ

   • テンプレートの不要部分を削除
   • SCSSでスタイル調整

   Scssは書いた経験があるのですが、gulpファイルの設定は初めてしたので勉強になりました

4. favicon、イメージデザイン

   • Canvaを利用
     
     https://www.canva.com/
     
     これなしではデザイン作れません　いつもありがとう
     

5. 各種SNSシェアボタンや、metaタグ、GoogleAnalytics実装

   • twitter ogp設定がうまくいかない
     画像がうまく表示されず、ドンズバの記事が見つからなかったのでブログで記事にしました

   (Github pages×freenom)Twitter OGP画像が反映されない時の対応　

これらを終えたあと、リリース前にキチンと動けているか動作確認をします

リリース

1. マニュアル作成

2. Github pagesで公開+freenomで独自ドメイン化

   こちらの記事が参考になりました
   　　ひでひ's blog
   
   注意した点
   　- Github pagesの設定をしても公開されませんでしたが、もう一度リモートにプッシュすれば繋げることができました
   　 - freenomでドメイン名調べるときは、検索時にトップレベルドメイン(.tkや.gaなど)がないと先に進まなかったです(ワカリニクイ。シカシムリョウダシモンクイエナイ)

   静的サイトという縛りはあるものの、 github×freenom の組み合わせで、
   Https付きでの独自ドメイン を完全無料で公開できるのはほんと有難いですね

3. リリースをPR
   便利に使ってもらうために世に出したサービス、アピールしなくてはMOTTAINAI
   そう思い、無料でできる範囲で
   

   ・Service Safari
   ・ロケットリリース
   ・findweb
   ・WEBサービスまとめてみた
   ・Eggineer

   に登録申請をこれからできればと思います
   ※他にもPR出来そうなサービスがあれば知りたいです

所感

転職用のポートフォリオや業務以外で、初めて自分で企画・開発をしました。
「あったらいいなと思えるものを自分でつくる」のは想像以上にエネルギーが湧きモチベーションが下がらなかったです。

やはり自分で考えたアイディアをカタチにするのが、何より良い学習教材だと思いました！

今回は静的なサイトだったので、次は技術的に難易度が上がるものに挑戦できればと思います

@hiKafka ←Twitter フォローお願いします