教内でWebを安く開発するには

KChan 2022年1月5日
目次
  1. 支部四会規模になるとWebの予算は取れない
  2. 天理教のWeb製作はコストを極小化したい
  3. 趣味の一環として作る。楽しんでも過大な期待はしない
  4. 広告なしのWebは無料で作れる
  5. 組織の紹介サイト以外のWebの用途も考えるべき
  6. Web開発の敷居は下がっている
  7. まずはWebの表側だけで良い
  8. なぜNext.jsか?
  9. 最初のNext.jsプロジェクトをリリースするまでの大まかな手順
  10. おわりに

支部四会規模になるとWebの予算は取れない

 例えば支部や支部青年会でWebを作りたいと言った場合でもなかなか予算は取れないと思います。

 たしかに世の中で多く用いられているWordPressで作られているWebは、ブログサイト以外のこともできます。たとえば商材の販売をしたり、メンバーだけに見れるようにして文章データの集積所にするなど、用途は広いのです。しかし月額500円ぐらいはかかってしまいます。年間にすると6,000円ぐらいはかかります。支部青年会の予算は地域によって千差万別ですが、これはかなりの重荷になり、とても導入できるものではありません。

 すでにWordPress用のサーバーを持っていてサーバー資源を分けてもらえるのであればその方法でもよいのですが、この方法は天理教の中でも知っている人は多いと思いますので、別の方法を紹介します。

天理教のWeb製作はコストを極小化したい

 過去に一般の企業のWeb開発においてどの技術を使うか相談を受けたことがありました。そこで実感したことは、天理教の各会や支部・大教会と、一般の企業の支出に対する感覚はかなり違うということです。一般の企業はそもそも従業員を専従として雇うことが多いので給料だけで相当な支出になります。なので業務が改善されるのであれば、年間どころか月額1万円ぐらいの支出は構わないとのことでした。私もその仕事では「そんなにケチらなくてよいから、こちらが過去に使い慣れた技術が使えるサーバーを教えてほしい」と言われたことがあります。

 それに比べ、支部・教区の四会は専従の従業員はあまり雇っておらず、人件費がほぼゼロの代わりに、所属していながらでも個々の活動に参加するもしないも所属する人が自由に決定できる、拘束力の弱いつながりでもあります。

 そうなると同じWebを作るにしても、天理教ではWebの技術選定において一般の企業にはない工夫をする必要が出てきます。すなわちサーバー代などの固定費は他のものを犠牲にしても、一般の企業よりもかなり低額に抑える必要があるのです。

趣味の一環として作る。楽しんでも過大な期待はしない

 そこで、ここでは無料で用途の広いWebを作る方法の概略を紹介します。正直に言って、宣伝の役に立ったり、実際の人・モノ・金・サービスが動くようなものでなければ、ほとんどWeb開発は趣味の範囲ではないかと思います。

 しかしそこは良く言いかえれば遊びというものでもあり、もしこの記事の読者の中に「Web開発をやってみたい」という直属・教区支部の四会の友人がいましたらこれを参考に遊んでいただければ幸いです。またもし知り合いにWebを趣味でやってみたいという人がいましたら、ぜひその方の活躍できる場所を作ってあげてください。

 仲間と将来の展望を考えたり試行錯誤しながら、いろんな夢を見たり、手を動かしていけば、きっと最初に期待していたものよりも、具体的で効果のある改善のアイディアが得られると思います。

 Webに限らずIT技術は、時に低コストで大きな改善効果を生み出すこともあります。天理教内の個々の組織で今困難とされているようなそれぞれの業務上の課題であっても、ひょっとしたらその解決の糸口の一端がWebやIT技術にある可能性もあります。

 この分野で、Webをお道の活動のために活用してくれる仲間が増えて下されば幸いです。

広告なしのWebは無料で作れる

 Vercelなどのホスティングサービスを利用すれば、広告なしのWebであっても無料でリリースできる時代になりました。一昔前のホスティングサービスで料金を支払って、手続きが完了するまで数日待つという手間はなくなりました。確かに検索エンジンの上位にランクインさせるSEO対策などを真剣に考えなければならない場合もWordPressが手っ取り早いです。また、一般の人に広く見せるタイプのWebに関してもWordPressの方が手っ取り早くできます。しかし内部向けのサイトであれば、VercelにNext.jsで作ったWebを載せるという組み合わせもまた、簡単で用途が広いのではないかと思います。さらに費用は0円から始めることができ、ドメインが必要であってもドメイン代だけでOKですので、年間千数百円ぐらいに抑えることもできます。

組織の紹介サイト以外のWebの用途も考えるべき

 プログラムを書いたことのない一昔前の人から見れば、Webと言えば、組織の紹介のための用途が中心と思われるかもしれません。しかし今では普段使っているスマホアプリのように、純粋にソフトととらえて良いのではないかと思います。集計の仕方を選択することでデータを瞬時に切り替えたり、様々なことが出来ます。SNS、ゲーム、業務システムなども作れます。入力して集計して表示するものでしたらほとんどネイティブアプリではなくてもWebで済む場合も多いと思います。

 一般に公開することだけを目的とするのではなく、仲間内で見るデータを一元化したり、学生会では教会の所在地や祭典日の分布を教会系統ごとに集計するなどして、行事に最適な日を探しやすくするといった使い方も可能です。内部しかアクセスできないサイトを作成して、その学生会で引き継がなければならないことや覚えなければならないことをクイズゲームにして覚えやすくしたりすることもできます。スマホの普及した現在では、いつでもどこでも会に関わることのできる道具になるのです。

Web開発の敷居は下がっている

 上を目指せばキリのないのがWebですが、天理教内部における利用にとどめるのであれば、それほど高い技術は必要ないかもしれません。コードを書くことなく簡単にWebサイトを作るサービスに比べれば、この記事でおすすめしようとしているNext.jsを使ったWebの作成は確かに難しくはあります。しかしそれでも技術力のある先人たちの知恵や、ツールの進歩、情報発信の努力のおかげで、今まで複雑すぎて作れなかったものも、比較的作りやすくなっています。

まずはWebの表側だけで良い

 完璧なシステム化をして組織で運用したいとなれば、裏で処理してデータをサーバーに保存するサーバーやデータベースなど、本格的な技術が必要とされるでしょう。しかし、単純に内部向けの情報共有システムとして使いたいのであれば、まずは表側、つまり、いま皆さんが見ているWebをデザインだけ作れるようになるだけで十分です。

 たとえば全員が書き込めるようにするWebとなると本格的なプログラミングが必要になってしまいます。しかし、例えば開発者が議事禄をまとめてWebにアップし、全員が学習すべき項目に関しては別途開発者が手動で問題集を追加していくというような使い方にとどめるのであれば、このWebの表側を覚えるだけで十分です。

 ただし、Next.jsに限らずWebは基本的にだれでも閲覧できてしまうものなので、Basic認証(「Next.js Basic認証」でググってください)などを施したり、検索エンジンに乗らない工夫(「robots.txtの書き方」でググってください)が必要になります。個人情報や機密情報の扱いにはくれぐれも注意してください。

なぜNext.jsか?

 Webを楽に作るために先人たちが生み出してくれたツールは多くあります。まずはHTML + CSS + JavaScriptで遊ぶとよいでしょう。しかしその概略を理解出来たら、今度はNext.jsで遊んでみることをお勧めします。

 第一にVercelという無料枠のあるホスティングサービスにアップする場合、ほかのツールを使うと細かな設定など必要になってくるのですが、Next.jsはほとんど設定なしでサーバーにアップできます。そもそもVercel社が公式に出したのがNext.jsですので、相性がとても良いのです。

 第二に2022年現在、Next.jsはWeb開発において世界的に多く使われている技術であり、今後もいろんな修正やアップデートが期待できます。開発人口が多いということは、開発元の強力なサポートを受けられるというメリットがあります。

 第三に一度使ったパーツが使いまわししやすく、開発の労力を下げる事が出来る点です。生のHTMLに比べると、最初の敷居はかなり上がりますが、使っているうちに必ずその開発効率の良さ、パーツとパーツを組み合わせるときの簡単さに惚れることでしょう。

 たしかに内部の人間しか使わなくて、間に合わせのものでよいといったケースでは、HTML + CSS + JavaScriptだけで作った方が時短になるケースもあります。しかしちょっと複雑なWebを作ってみたいと思ったときにNext.jsは有用な技術であり、作れるもののふり幅も広くなると思います。

 スマホアプリの開発との比較で言えば、スマホアプリのように審査やAndroid、iPhone両対応を考えなくて済む点もメリットです。WebであってもAndroidとiPhoneでは微妙に挙動が違ったりはするのですが、Webを公開してURLを配ってしまえば、それでシステムをリリースできます。

 またスマホアプリでは天理教信者だけが使用できるアプリというのは基本的に審査が通りにくいと思いますので、部外者を入れたくないようなシステムを作る場合でもWebは有力な選択肢になります。

最初のNext.jsプロジェクトをリリースするまでの大まかな手順

 記事が長くなってきましたので、ここでは概略だけにとどめます。具体的に何を学べばよいのかは、ググってもなかなか出てこないと思います。なのでここに一例を載せておきます。個々の技術についてはググると様々な人がもっと詳しく書いていますので、検索する練習も兼ねて調べてみてください。

 ここに書かれていることがわからなくてもググったり手を動かしていければ次第に少しずつ分かるようになります。すべて無料でできます(主にWindowsユーザーを対象とします)

  1. Visual Studio Codeをインストールして日本語化する
  2. Visual Studio CodeでHTML CSS JavaScriptのファイルを書いてみて、それらが連携して動くものを作る
  3. node.jsをダウンロードしてインストールする
  4. Visual Studio Codeのコンソールを開き、Next.js公式サイトのnpx create-next-app --typescriptコマンドでNext.jsプロジェクトを作る
  5. 4で作ったフォルダにcdコマンドで移動して、npm run devで開発サーバーを起動する。ブラウザでlocalhost:3000と入力すると現在開発中のサイトが見れる
  6. JavaScriptとの違いを意識しながらTypeScript文法を覚える(後者の方がコードは長くなりますが、バグを早い段階で判明させることができるので、Next.jsではTypeScriptを使うことをお勧めします)
  7. Next.jsの基本的な使い方を覚える
  8. HTML CSS TypeScriptの概要を見ながら、tsx構文を覚えつつ、サイトを作っていく。(個々の技術は必要になってから学べばよい)
  9. Vercelの無料アカウントを作成する
  10. VercelCLIをインストールする
  11. Vercelにリリースする

おわりに

 今回はWebのことだけを取り上げ、教内向けに低コストでもふり幅の広い開発を行う方法の入り口を考えてみました。Webの開発だけとっても様々な方法があり、自分たちにとってどの方法が良いかは簡単には断言できない複雑さがあります。広大な世界で、それぞれ一長一短もありますし、そもそもWebを作ることが問題解決の本質ではないケースもあります。Webを作らなくてもLINE BOTをノーコードで作れば問題解決とか、表計算ソフトで解決可能な問題や、あるいは人力で解決した方が手っ取り早かったり、そもそも手を付けないのが賢明な問題もあるかもしれません。

 プログラミングやWebや各種ソフトウェアについては年齢を問わず使える工作のようなものと私は考えています。スマホやコンピュータが普及した今日においては、かなり広い範囲で使える工作であると思います。遊びにも仕事にもつかえますし、教内のことにも、教外の仕事にも役立つかもしれません。

 もしWebをやってみたいと思うのであれば、仕事やお道やあなたの人生を犠牲にしない範囲でやってみてください。

 私はプログラミングも、ここで書かれていることも独学でやりましていくつかWebも作りました。もともと10代からWindowsアプリを多く開発してきてWebにはあまり縁がなく、Next.jsを使い始めたのは半年前でした。正直、結構大変でした。そのため、私の知識に偏りがあることも認めます。しかしこの記事が少しでもこれからWebをやってみたいという教内の人の手助けになればと思います。

 ありがとうございました。

KChan
とある直属学生会で活動していました。議事録の作成からWeb製作まで、活動に役立つトピックを上げていきます。