Zenn
📖

【個人開発】地域の魅力を発信できるデジタルパンフレットサービス「Openパンフレット」を作った

2021/08/27に公開
AWS
iOS
個人開発
idea

※この記事は、個人で作成したデジタルパンフレットサービスをリリースしたことの報告と宣伝です。

はじめに

  • デジタルパンフレット作成公開サービス Openパンフレット をリリースしました。

  • 個人開発です。

  • バックエンドはだいたいAWSです。

  • Android未対応🙇

https://open-pamphlet.com

サービス作成時の技術的な部分の苦労など読みたい方はこちら

Openパンフレットについて

デジタルパンフレットを作成し、モバイルアプリで公開できるサービスです。
複数人で協力してひとつのパンフレットを作成できるところが特徴です。

例えば、商店街のパンフレットを作成した場合、各店舗のコンテンツは店舗ごと必要に応じて作成するといったイメージです。

このサービスは、商店街や地域など一般の生活圏で幅広く使ってほしいと思っています。

私がほしいなーあったらいいなーと思うパンフレットはこれだけあります。
それぞれ、いろいろな特色があって見るだけでも十分楽しめるし、集客やコミュニティの活性化にも一役買うでしょう。
・商店街
・地域（「○○町パンフレット」みたいな感じ）
・商業施設
・公共施設（動物園や公園、市役所のフロアマップなど）
・学校の学園祭
・夏祭りの案内
・東名高速のSAパンフレット
・全国お城パンフレット

なぜ作ろうと思ったのか

単純ですが、自分がほしいと思ったからです。
きっかけとなったのは、子供ができて地域のイベントや旅行に出かけるようになったことで、でかけた先々で様々な疑問や不満をもったからです。

その中でも、「地域の情報発信」と「案内の多様さ」が今回のサービス開発のきっかけになっています。

地域の情報発信

私は、育休期間に地域のボランティアさんが主催するひまわり会という交流会に参加していました。ところが、１年後、運営側の高齢化が原因で会がいつの間にか解散していました。解散した事実も近所の方に聞いて初めて知りました。
「もっと、地域に対する情報発信がなされていれば、なくならなかったんじゃないか？」
「IT化が進んだ今でも地域の情報のやり取りはあまり発達していないのではないか？」
そんな疑問が生まれました。

案内の多様さ

商業施設とか動物園とか行くとパンフレットありますよね？
ごはん食べるのどこかなーとか、トイレどこかなーとか

探す時パンフレットを見たり、HPでいろいろ調べてみたり、オリジナルアプリ入れてみたり。

いつも、必要な情報に大差はないのですが
どの手段をとっても操作方法や掲載される情報量が異なっていて使いにくさを感じました。

案内に多様さを求めていないと気が付き、
プラットフォームはシンプルなものがひとつあれば十分だと考えました。

最終的に

ないなら自分でつくろう。となった訳です。

コンセプト

いろいろな思いはありますが、メインのコンセプトはこちら。

  • 複数人で作れる
  • 簡単に作れる
  • 毎日でも見れる（見るだけの価値がある）

実際のパンフレット

Web上でパンフレットを作成するとモバイルアプリ上でこんな感じに見れます。

このように一つのパンフレットにページを作成し、その中にショップを配置するといったシンプルな作りです。
パンフレットページにショップが複数掲載されているかと思いますが、こちらは複数ユーザーが追加できます。パンフレットオーナーによる権限の設定によって、ショップ・施設・イベントそれぞれ掲載の可否をコントロールできます。

これにより、明日にはパン屋さんが追加されているかもしれないし、夏祭りのイベントが掲載されているかもしれないといったワクワク感のあるパンフレットになります。

今までのパンフレットのように静的な情報をみるだけというものではなく、継続的な発展を遂げるパンフレットとなり毎日見る価値のあるものになるのではないかという考えです。

ITっぽく言うなら「CIパンフレット」です。

違うか。

🙇宣伝

Android開発を外注するためにクラウドファンディング募集しています。
Androidも自分で作れよ!って思うかもしれないですが、完全にキャパオーバーなので募集させてもらってますm(_ _)m
https://camp-fire.jp/projects/view/467291

技術や知識について

需要があるかわかりませんが、いろいろな技術に触れ感じたことや実際にやったことなど紹介していきます。
アプリ屋が、色んな分野に手を出すとこうなる。という例だと思って見て下さい。

参考までに作り始める前のスキルはこんな感じ。Cでバイナリデータいじくるのが得意でした。

言語：C > Java > C#
フレームワーク：SpringBoot
分野：組込み(5年)、Android(3年 5.xの頃)、Webバックエンド(2年 マネジメント半分)

フロント

カバーすべき範囲が広く、それぞれの学習に時間をかけているとどれだけ時間があっても足らないというのが全体に対する印象。
また、フロントの人たちと仕事で関わったことがないせいだと思いますが、フロントの技術者がどのようにチームを分けて仕事をしたりどういったスピード感で仕事しているのかとか全くイメージできていないで今に至ります。Openパンフレット程度のサービスの分量なら何人月程度の仕事なのか気になります。

  • CSS

    • 📖学習
      他のWebサイトで良いなと思うデザインのCSS引っこ抜いてきて、試しにページにあててみたりコードを眺めてみたりしていました。
      ここで身につけたFlex関連の知識（横に並べたり縦に並べたり重ねたり）が、意外とSwiftUIで開発するときに役立ったのは嬉しい誤算でした。
    • 😩設計
      FLOCSSやOOCSSなど設計方式があるみたいなのだけど、CSSどころかフロント入門者の自分には理解して実践するだけのバックグラウンドがありませんでした。途中から「画面ごとに組んだほうが早い」という結論になりました。
      今なら、少しは理解できるようになっているのかもしれない。

  • Javascript

    • 📖学習
      HTMLのどういった要素を使用して表示を制御するのかといったところを理解するのに時間がかかりました。classやid、data属性などそういった基本的な知識が薄かったために、苦労したという印象です。
      また、調べれば部分的なコードとして実装方法は出てくるのですが、コード全体がどのように構成されるべきかみたいな部分が結構謎で悩んだりしていました。
      結果、似たことを実現しているサイトのコードを眺めるのが一番役に立ったと思います。
    • 👣モチベーション
      Javascriptを少し触ったことがある程度から開始してるので、モチベーションがとにかく上がらなかった。JSで何ができて何ができないのか、一般的にどういった使われ方をするのか、自分がやりたいことはどうすればできるのか。
      新入社員に戻った気分でした。
      今は、JavascriptのことはHTMLを管理する操作系念能力者程度に思っています。
    • 🔶フレームワーク
      とにかく学習する時間がもったいなかったので、ほとんど使ってません。
      きっと、フロントの技術者から見れば疑問符しかつかないでしょう。
      学習時間と開発速度が完全にトレードオフな状況だったので、判断が正しかったかどうかは今でも疑問です。今考えると、学習に時間を割くことに対する焦りに負けたのだと思います。
      サービスは使ってもらって便利だなーって思ってもらえれば、それでいいんだと自分に言い聞かせて納得させています。

  • デザイン

    • 💰外注
      サービスがある程度形になり、アイコンやら画像やらいろいろ必要なものが出てきタイミングで外注しました。それまでは、フリーの素材をダウンロードして仮置してました。注文したのはパンフレットで使うアイコンのピクトグラムとトップページのデザインです。
      ピクトグラムは出来上がってきた時、感動しました。
    • 📖学習（Adobe illustrator）
      多くのエンジニアが同じだと思いますが、自分には絶対縁がないと思っていた分野です。
      ですが、外注しまくる資金があるわけではないので、学ばざるを得ませんでした。
      まずは、外注して納品してもらったものを見てどのように作っているのか想像して学習していました。
      それから、Adobeのツールに出てくる単語の意味わからないのできちんと調べるようにしました。これは公式でいくらでも資料があるので困りませんでした。
      今でも、使いこなせているわけではないですが泥臭い感じに思った画像など作れるようになりました。
      ただ、細かな作業していると「ヱ"ィ"ーーー」ってなります。

アプリ

WebのフレームワークもSpringBootを少し触ったことがある程度だったので、思ったように実装できるまでは時間がかかりました。

誰かに、Rails使えば爆速でアプリ作れるって言われた気がしたのですがそんなの幻でした。

  • Ruby on Rails
    人気が落ちたりしていてオワコンだとか言われたりしていますが、情報も多くて作りやすかったほうだと思います。ダメなフレームワークかどうかは、いくつかWebフレームワークを触ってみて初めて分かるのかもしれません。自分には、情報も多く作りやすかった方だと思います。

    • 📖学習
      環境構築・実行方法・メインの制御これらのイメージを掴むため最初だけProgateを使いました。
      最初に躓くわりに時間もかかってまどろっこしいポイントなので、ハンズオン形式で身につけてたいなと思っていたところで利用させてもらいました。
      学習サイトとしてとにかくすばらしかったです。感謝。
      それ以外は調べれば情報は出てくるし、公式のドキュメントも問題なく読めるものでした。
    • 🆙バージョンアップに追われる
      一人でやっていると、時間がかかってしまうので気がつくと最新版のメジャーバージョンが変わっているという状況に焦りました。

インフラ

AWSを選択した理由はこれといってなし。
業務でよく聞く単語だったので、クラウドインフラの選択肢として候補にあっただけです。

ダメだと思います。

  • AWS
    • 📖学習
      「さわって学ぶクラウドインフラ Amazon Web Services 基礎からのネットワーク＆サーバー構築」この本を5周くらいしたと思います。感謝。
      後は、ブログ記事でやりたいことを調べて実践という感じ。
      途中から、CloudFormationでコード化してから、理解が深まったと思います。自分だけかもしれませんが、パラメータシートとかインフラの構成図とかよりかもコードのほうが理解が早い気がしました。
      また、ちょうどAWSの理解を深めたいと思っていたタイミングでリリースされたので、くろかわこうへいさん運営のAWSCloudTechに参加してコミュニティで情報収集という感じ。
      初学者コミュニティなので、専門的な話題はあまり出ませんが躓くポイントで誰かが投稿するので、投稿に対して自分は関係あるのか・自分ならどう解決するかといったところをキャッチアップするのに役立ちました。
    • 👀構成相談
      AWSの相談サービスにお世話になりました。
      申し込むと、AWSのソリューションアーキテクトの方々がオンラインで構成をレビューしてくれます。「ここは少し料金が高い」とか、「これを実現したいならこのサービスを使ってみては？」とか指摘を頂けます。自分の知識範囲が偏ったりしている場合、とても役に立つと思います。
      無料でした。感謝。
      ※利用したときと少し入り口が違う気がしますが、多分このページ。
    • 👀技術的相談
      技術的な質問がある場合や、サービスを利用すべきか否かの質問など軽微な事柄に関しては、通常のサポートを利用していました。
      ふわっとした質問内容に対しては、参考リンクとかがあれやこれやと回答に添付される場合が多いです。明確に、「ここが知りたい！」といった質問内容に対しては、きちんと回答がもらえる場合が多いです。
      無料キャンペーン期間中に、ビジネスサポートプラン（＄１００/月）にしてましたが、使いこなせずデベロッパープラン（$29/月）に格下げ。
      自分一人でいろいろやっていると質問しているどころではなく、質問文書いている時間と回答の待ち時間があれば、ドキュメント漁ったりトライアンドエラーで問題解決したほうが早い感じです。
    • 👟つまづき
      一番印象に残っているつまづきポイントは、コードのデプロイ関連です。
      CodeCommitへPushした内容をCodePiplineでデプロイする仕組みなのですが、トライアンドエラーに時間がかかるのと、EC2側のCodeDeployやcfn関連のエージェントの挙動がいまいち読みにくかったことが原因だと思います。気が付かないうちに、AutoScallingで無限ループ（インスタンス起動→失敗→インスタンス起動→失敗）しているなんてことがよくありました。

モバイルアプリ

  • iOS
    • 📖学習
      こちらもゼロスタート。
      Udemyで適当なハンズオンを購入してみましたが、当時SwiftUIの教材は少なくあっても使い物になりませんでした。講師にもよるのかもしれませんが、諦めて独学にしました。
      一番時間がかかったのは、画面遷移時の処理周りの実装が固まるまででした。
      １．画面遷移
      ２．インジケータ表示している間に通信してコンテンツ取得
      ３．表示
      SwiftUIのstructとonAppearは難しい。
    • ⛺リリース関連
      証明書関連で、わけのわからないところが結構多かったです。いろいろなサイトで紹介されているのを見ながら時間をかけてやりました。審査に関しては英語でしたが、人対人のやり取りなのでむしろわかりやすかったです。
  • Android
    未対応。

規約など

弁護士様に協力いただき作成しました。

作業時間について

この1年ちょっと作業してきた全体を10として、各分野に割り当ててきた時間の大体の割合です。一人で作業することがどれだけ非効率でスピードが出ないかが伺えます。

インフラ フロント アプリ モバイル その他（絵書いたり文字書いたり）
2 1 3 2 2

最後に

ここまでお読み頂きありがとうございました。

まだまだ、自分の作りたかったサービスへの機能もクオリティも足りていない状況ですが、これから更に良いものにしていこうと思います。

Android版の開発のため

Android版の開発を外注しようとしています。その資金確保のためクラウドファンディングさせてもらっています。このサービスの未来に少しでも共感頂ける場合は、よろしければそちらも見てみていただけると励みになります。
https://camp-fire.jp/projects/view/467291

このサービスに興味のある方

このサービスに興味のある商店街や公共施設などの関係者様いれば連絡いただければと思います。

Discussion