データをクラウド上ではなくユーザーのスマホ内に保存するタイプのスマホアプリをReact NativeとRealmで開発する方法

React NativeでローカルデータベースRealmを使ったスマホアプリをつくる

<blockquote>この記事は、2020年6月、<a href="https://crieit.net/posts/introducing-portaldots" target="_blank" rel="noopener noreferrer">Crieit に投稿した記事</a>を投稿し直したものです</blockquote><h2>目次</h2><ul><li><a href="#h8d027c8ed3">はじめに</a></li><li><a href="#h36ede6cc4d">私は誰？</a></li><li><a href="#h5268e1b13e">参加団体向けウェブシステム「PortalDots」</a><ul><li><a href="#h23a7bb094e">開発環境の動かし方</a></li><li><a href="#h8f2158e177">トップページ</a></li><li><a href="#h4be1dba8a3">企画参加登録</a></li><li><a href="#h5c30d50ab8">申請フォーム</a></li><li><a href="#h497fac5bbf">フォームエディター(Vue.js 製)</a></li></ul></li><li><a href="#hfd8564b1f9">CodeIgniter から Laravel への移行途中です</a></li><li><a href="#h9be0c3393d">おわりに</a></li></ul><h2 id="h8d027c8ed3">はじめに</h2><p>大学祭では、たくさんの参加団体（サークル・部活）が模擬店などの企画を出店し、盛り上げています。</p><p>大学祭を成功させるには、実行委員会と参加団体の間の連携が欠かせません。連携するための方法として、実行委員会では、参加団体からの「各種申請」を受け付けています。例えば、大学祭当日に配布されるパンフレットに掲載する内容を参加団体から募集する必要があります。また、実行委員会が貸し出す備品の申請を受け付けることもあります。</p><p>こうした申請受付業務は、多くの大学祭では紙による受付であったり、メールや Google フォームでの受付を行っているところが多いかと思います。</p><p>紙やメールによる受付の場合、紙・メールに書かれた内容を1枚1枚Excelに入力していく手間がかかります。受付方法によっては対面での対応が必要となり、昨今の状況下では厳しいものがあります。（そもそも、今年の秋冬に開催される学園祭でも、予定通り開催できるかどうか怪しいところではありますが……）</p><p>そのような中、私は<strong>大学祭の各種申請などを受け付けるウェブシステムを開発し、今年になってそれを OSS 化</strong>してみました。<br></p><ul><li>GitHub : <a href="https://github.com/portal-dots/PortalDots" target="_blank" rel="noopener noreferrer">https://github.com/portal-dots/PortalDots</a></li><li>PortalDots 公式ウェブサイト(2020/11/30 公開) : <a href="https://dots.soji.dev" target="_blank" rel="noopener noreferrer">https://dots.soji.dev</a></li></ul><h2 id="h36ede6cc4d">私は誰？</h2><p>私は、東京理科大学の野田キャンパスに通う大学生です。大学名こそ「東京」とついていますが、「野田」は「千葉県」にあります。そんな野田キャンパスで開催される学園祭「野田地区理大祭」の実行委員をしていました。</p><p>実行委員時代は、PortalDots の開発のほか、公式ウェブサイト・パンフレットのデザイン・実装なども行っていました。</p><ul><li>野田地区理大祭公式ウェブサイト : <a href="https://nodaridaisai.com/" target="_blank" rel="noopener noreferrer">https://nodaridaisai.com/</a></li></ul><h2 id="h5268e1b13e">参加団体向けウェブシステム「PortalDots」</h2><p></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/portaldots_logo%403x.png?w=325&amp;h=80" alt="PortalDotsロゴ" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"></figure><p></p><ul><li>GitHub : <a href="https://github.com/portal-dots/PortalDots" target="_blank" rel="noopener noreferrer">https://github.com/portal-dots/PortalDots</a><ul><li>よろしければぜひ Star お願いします…！</li></ul></li></ul><h3 id="h23a7bb094e">開発環境の動かし方</h3><p>開発環境を動かすには Git、PHP(7.3以上)、Composer、Node.js、Yarn、Docker、docker-compose がセットアップ済みである必要があります。</p><p><strong>2020/06/27 追記</strong>  : コマンドの実行順序が間違っていたので修正しました。</p><pre><code class="hljs"><span class="hljs-comment"># 1. PortalDots をクローン</span>
$ git <span class="hljs-built_in">clone</span> git@github.com:portal-dots/PortalDots.git
$ <span class="hljs-built_in">cd</span> PortalDots/

<span class="hljs-comment"># 2. 必要な PHP パッケージをインストール</span>
<span class="hljs-comment"># ※ エラーが表示される場合は、エラーの指示に従って、必要な PHP 拡張モジュールのインストールを行ってください</span>
$ composer install

<span class="hljs-comment"># 3. 必要な Node.js パッケージをインストール</span>
<span class="hljs-comment"># ※ エラーが表示される場合は、Node.js のバージョンが古い可能性があります。Node.js のバージョンをアップグレードしてください</span>
$ yarn install

<span class="hljs-comment"># 4. 設定ファイルを作成</span>
$ cp .env.example .env
$ php artisan key:generate

<span class="hljs-comment"># 5. 開発環境を起動する</span>
$ yarn docker

<span class="hljs-comment"># 6. マイグレーション(データベースのセットアップ)</span>
$ yarn migrate

<span class="hljs-comment"># 7. フロントエンド開発サーバーの起動</span>
$ yarn watch
<span class="hljs-comment"># → http://localhost:3000 にアクセスするとトップページが表示されます</span>
<span class="hljs-comment"># Ctrl-C で停止</span>

<span class="hljs-comment"># 8. 開発環境を停止する</span>
$ yarn docker-stop</code></pre><h3 id="h8f2158e177">トップページ</h3><p>トップページでは、参加団体向け説明会の次回日程の表示機能や、各種お知らせの閲覧、配布資料のダウンロードなどができるようになっています。</p><p>企画参加登録の受付期間中は、提出している参加登録の受理状況も確認できます。</p><p></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/42a053619c899ae5db5c6cbc04f3d5eb5ee266d90c32e.png?w=2880&amp;h=1800" alt="トップページ" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"><figcaption class="px-6">企画参加登録、お知らせ、配布資料を1ページで把握することができる。</figcaption></figure><p></p><h3 id="h4be1dba8a3">企画参加登録</h3><p>学園祭への企画エントリーもウェブから可能です。</p><p></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/942b1908f49e4c9db2e9466e90b229eb5ee267d059776.png?w=2880&amp;h=1800" alt="企画参加登録" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"><figcaption class="px-6">企画名や団体名を入力するフォーム。画像中にはないが、副責任者ユーザーの登録を行うための機能もある。</figcaption></figure><p></p><h3 id="h5c30d50ab8">申請フォーム</h3><p>大学祭の参加団体は、このようなフォームからパンフレット掲載内容などの情報を委員会へ提出することができます。</p><p>受付期間を設定することも可能です。</p><p></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/98cb9cc9bf6a8e93ec300a84080c92345ee2679b7ac94.png?w=1102&amp;h=800" alt="申請フォーム" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"><figcaption class="px-6">ラジオボタンやテキストボックスの入力、ファイルアップロード等を行うことができる</figcaption></figure><p></p><h3 id="h497fac5bbf">フォームエディター(Vue.js 製)</h3><p>「フォームエディター」は <strong>PortalDots の目玉機能（？）</strong> です。</p><p>実行委員は、各種申請を受け付けるフォームを Google フォームのようなノリで作成することができるようになっています。</p><p>「じゃあ、Google フォーム使えば良いのでは？」と思われるかもしれませんが、Google フォームではログイン・新規登録機能<span style="font-size: 0.75em">(※1)</span>は利用できない上、回答内容の編集が容易でなかったり<span style="font-size: 0.75em">(※2)</span>、<strong>1団体あたり1回答までに制限できなかったり</strong><span style="font-size: 0.75em">(※3)</span>するなど、大学祭の申請フォームとしては不便なところもあります。</p><p>PortalDots の「フォームエディター」で作成できるフォームは、回答受付期間を設定できたり、1企画につき1回まで回答可能という設定ができたり、あとから回答を簡単に修正できたりします。</p><p><span style="font-size: 0.75em">※1 : Google フォームでも、一応 Google アカウントでのログインを必須にすることはできます</span><br><span style="font-size: 0.75em">※2 :&nbsp;Google フォームでも、回答者に回答の編集を許可することはできます。ただ、編集用の URL を紛失してしまうと編集できなくなってしまいます</span><br><span style="font-size: 0.75em">※3 : Google フォームでは、</span><strong style="font-size: 0.75em">1ユーザーあたり</strong><span style="font-size: 0.75em">の回答数を制限できます。</span><strong style="font-size: 0.75em">1団体あたり</strong><span style="font-size: 0.75em">のような制限をかけるのは難しいと思われます</span></p><p></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/fd82398a4a47ec43ce8edc68a27147cd5ee2676b1a9f0.png?w=2880&amp;h=1800" alt="フォームエディター" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"><figcaption class="px-6">テキストボックスや見出しを自由に配置することができる。</figcaption></figure><p></p><div class="twitter-tweet-container" data-tweet-id="1271122648928403456"><blockquote class=""><p lang="ja" dir="ltr">参加企画に提出してもらう各種申請もウェブフォームで受け付けられます。動画のように設問ぐりぐりできます。 <a href="https://t.co/5rVFRVnUPd">pic.twitter.com/5rVFRVnUPd</a></p>— Soji (@sofpyon) <a href="https://twitter.com/sofpyon/status/1271122648928403456?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote></div><p></p><h2 id="hfd8564b1f9">CodeIgniter から Laravel への移行途中です</h2><p>現在、「CodeIgniter」と「Laravel」という、2つのウェブフレームワークを混在して使用しています。</p><p>元々 PortalDots は、私がウェブフレームワーク初心者のころ(大学1年の夏)に開発を始めた物でした。それ以前はフレームワークという物自体を使ったことがなく、プレーンな PHP コードでしか書いたことがなかったのですが、「CodeIgniter というフレームワークは簡単」だという話を聞き、試しに PortalDots の開発で使ってみたのでした。</p><p>しかし、CodeIgniter の機能は貧弱である点や、なるべくメインストリームにあるフレームワークを使ったほうが今後のメンテナンスがしやすいだろうということで、Laravel への移行をはじめました。</p><p>2020年6月現在、CodeIgniter が使われているのは「スタッフモード」（実行委員用のページ）のみとなっており、それ以外のページは Laravel に移行済みとなっています。</p><h2 id="h9be0c3393d">おわりに</h2><p>OSS 化したので PortalDots はどなたでも自由にお使いいただけるようになりました。</p><p>学園祭実行委員会に所属しており、かつプログラミング経験のある方がいましたら、ぜひ使っていただきたいです。また、学園祭関係者でなくても、お試しとして実物を触っていただけると嬉しいです！</p><ul><li>GitHub : <a href="https://github.com/portal-dots/PortalDots" target="_blank" rel="noopener noreferrer">https://github.com/portal-dots/PortalDots</a></li><li>PortalDots 公式ウェブサイト(2020/11/30 公開) : <a href="https://dots.soji.dev" target="_blank" rel="noopener noreferrer">https://dots.soji.dev</a></li></ul>

参加団体からの各種申請を受け付けられるウェブシステムPortalDotsの紹介。

大学祭の参加団体向けウェブシステムをOSS化してみた

<p>いまご覧になっているウェブサイトは、2021年1月上旬にリニューアルしました。というわけで、新ウェブサイトをつくるにあたって利用した技術を紹介します。</p><h2>目次</h2><ul><li><a href="#h167a4179f4">技術一覧</a></li><li><a href="#h80249f0c1e">フレームワーク・言語</a><ul><li><a href="#haab1fd6475">Next.js</a></li><li><a href="#hbc08ded6c8">TypeScript</a></li><li><a href="#h5572fb6d00">Tailwind CSS</a></li></ul></li><li><a href="#h7cd95d52a2">インフラ系</a><ul><li><a href="#h065a574f0d">Vercel</a></li><li><a href="#hae6947d5ce">microCMS</a></li></ul></li><li><a href="#h1717b7367d">おまけ : リニューアルのきっかけ</a></li></ul><h2 id="h167a4179f4">技術一覧</h2><ul><li>フレームワーク・言語<ul><li>Next.js</li><li>TypeScript</li><li>Tailwind CSS</li></ul></li><li>インフラ系<ul><li>Vercel</li><li>microCMS</li></ul></li></ul><p>順番に見ていきます。</p><h2 id="h80249f0c1e">フレームワーク・言語</h2><h3 id="haab1fd6475">Next.js</h3><p><a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">https://nextjs.org/</a></p><p>Reactのフレームワークです。リニューアル前のウェブサイトではNuxt.jsを使っていました。Nuxt.jsはVue.jsのフレームワークです。</p><p>個人的にVue.jsとNuxt.jsのほうが愛着があり、今までNuxt.jsを使っていました。しかし、就職先はReactを使っている会社です。個人開発でReactを使っていないと成長に限界があるなと感じ、思い切ってVueからReactに移行してみました。</p><h3 id="hbc08ded6c8">TypeScript</h3><p><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">https://www.typescriptlang.org/</a></p><p>型定義ができるJavaScriptです。インターン先の開発でTypeScriptがだいぶ書けるようになってきたので、個人開発でも使ってみることにしました。</p><p>インターン初期はTypeScriptにあまり慣れておらず、よくわからなかったらとりあえず<code>any</code> 付けとけばいっか、みたいなノリでした。当時は、少し込み入ったことをしようとするのが辛かった記憶があります。しかし最近は自分で型定義したり<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" target="_blank" rel="noopener noreferrer">Utility Types</a>が使えるようになってきました。TypeScriptの良さがわかってきました。そこで、このウェブサイトでもTypeScriptを使っています。</p><h3 id="h5572fb6d00">Tailwind CSS</h3><p><a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/</a></p><p>Utility Firstを謳うCSSフレームワークです。どこからか、Next.jsとTailwind CSSは相性が良い的な話を聞いたので、初めて使ってみました。</p><p>どんな感じのフレームワークなのかは、<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS公式サイトのアニメーション</a>を見ればかんたんに理解できるかと思います。Bootstrapなら<code>class="btn btn-primary"</code> と書くところ、Tailwind CSSでは以下のように書きます。</p><pre><code class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-blue-600 text-white hover:bg-blue-700 transition-colors focus:ring-2 ring-opacity-50 px-4 py-2 rounded-md select-none focus:outline-none"</span>&gt;</span>
  ボタン
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre><p><a href="https://play.tailwindcss.com/o9rmrLWnA7?layout=preview" target="_blank" rel="noopener noreferrer">デモはこちら</a> <span style="font-size: 0.75em">(読み込みに数秒かかります)</span><br><a href="https://play.tailwindcss.com/o9rmrLWnA7?layout=preview" target="_blank" rel="noopener noreferrer"></a></p><figure class="-mx-6 lg:-mx-16 xl:-mx-56 flex flex-col justify-center items-center"><a href="https://play.tailwindcss.com/o9rmrLWnA7?layout=preview" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/protected/ap-northeast-1:9b7062b5-abce-4fd3-8418-2597813d5e0e/service/soji-dev/media/%E3%83%9B%E3%82%99%E3%82%BF%E3%83%B3.png?w=120&amp;h=63" alt="Tailwind CSSでつくったボタン" class="block w-100 sm:rounded-lg sm:border border-gray-300 dark:border-gray-600 opacity-100 dark:opacity-60 dark:hover:opacity-100 transition-opacity duration-300 my-0"></a></figure><p></p><p>僕はこれを書いていて楽しかったです。素のCSSを書くより、細かいデザインをサクッと作れるのが好印象でした。</p><p>ただ、Tailwind CSSを使うメリットみたいなものはうまく説明できないので、もっと知りたい方は<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSSの公式サイト</a>などを見ると良いかと思います。</p><h2 id="h7cd95d52a2">インフラ系</h2><h3 id="h065a574f0d">Vercel</h3><p><a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">https://vercel.com/</a></p><p>ホスティングサービスです。Next.jsを使うなら、使うホスティングサービスはVercel一択だと思います。</p><p>GitHubと連携すれば、GitHubにコードをPushするだけでウェブサイトを公開できるので楽です。</p><h3 id="hae6947d5ce">microCMS</h3><p><a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">https://microcms.io/</a></p><p>ヘッドレスCMSです。このブログの記事や、<a href="https://soji.dev/products" target="_blank" rel="noopener noreferrer">プロダクト一覧ページ</a>のコンテンツはmicroCMSで管理しています。</p><p>正直、Markdownが使えるという点でNetlify CMSを使いたかったのですが、「VercelでNetlify CMS？」という、ただそれだけの理由で使いませんでした。</p><p>Netlify CMSと違って、microCMSはGUI上でAPIスキーマをポチポチ作れます。あと、日本製なので、UIは日本語です。</p><h2 id="h1717b7367d">おまけ : リニューアルのきっかけ</h2><p><a href="https://soji.dev/images/old_website.jpg" target="_blank" rel="noopener noreferrer">以前のウェブサイト</a>は約2年前に作り、その後、少しずつ手直しを重ねてきました。<br>ですが、いくつか問題が出てきました。</p><ul><li>各プロダクトについて、詳細な説明を書くための仕組みがなかった</li><li>サイト内にブログを設置したかった</li><li>手直しを重ねすぎてコードが混沌としてきた</li><li>そもそもデザインがダサい</li></ul><p>各プロダクトの説明欄を作ったり、ブログを作ったりするだけなら、今あるウェブサイトを改造していくという手もありました。ですが、「ダサい」問題は手直しレベルではどうにもならないという印象がありました。コードも汚いし、デザインを良くしようとしても違法建築のような状態になりかねない気がしていました。</p><p>そこで、思い切ってウェブサイトを一から作り直すことにしてみました。自分のウェブサイトを作り直すのに何日もかけたくなかったので、できるだけシンプルなデザインを心がけました。その結果、数日でほぼ完成させることができました。</p><p>新しいウェブサイトは以下のような特徴があります。</p><ul><li>ダークモードに対応<ul><li>以前のウェブサイトもダークモードに対応していました。しかし新しいウェブサイトでは、OSの設定とは別に、トグルスイッチでダークモードの切り替えができるようにしました。トグルスイッチは、ページの一番下に設置しています。</li></ul></li><li>プロダクトの紹介を長文で書ける<ul><li>以前のウェブサイトは、画像1枚 + かんたんな説明しか書くことができない仕様・デザインになっていました。新しいウェブサイトでは、画像や文章をたくさん書けるようにしました。</li></ul></li><li>コードがすっきり（？）<ul><li>これについては、僕自身のReactでの開発経験が浅く、現状だと何とも言えないです…</li></ul></li><li>デザインがよくなった<ul><li>Tailwind CSSの margin や padding 周りの機能は気が利いていて、良い感じの余白を使ったデザインが簡単にできます。おかげで、以前よりだいぶすっきりとしたデザインに仕上げることができた気がします。</li></ul></li></ul><p>個人的に、デザインがよくなったのは大きなプラスです。完全に自画自賛なのですが、個人開発のモチベーションがアップしました。リニューアルは正解だったと思います。</p>

使った技術の紹介と、リニューアルを決めたきっかけ。