元国語の先生による趣味全開のiPhoneアプリの作り方
元国語の先生です。このたびめでたく、趣味全開のiPhoneアプリを作ってリリースすることができました。わーわーぱちぱち！🎉
ダウンロードはこちらから↓ （古今和歌集のアプリです）
せっかくなので、文系の視点から「プログラミング」ってどういうもの？ という説明記事を書こうと思います。プログラミング教育に頭を抱える先生たちに届けばいいですねー。
プログラミングに必要なのは目的意識、問題解決能力、ググり力です！
プログラミングは、正直難しいです。全員必修なんて時代になったら、プログラミング嫌いの学生数は、古典文法や数学嫌いの比ではないと思われます。ぶっちゃけ誰にでもできることではないです。
ではどんな子ならできるのか。これはもちろん地頭も必要なんですけど、一番必要なのは目的意識ですね。自分で漫画や小説を書いて、多くの人に宣伝したいからホームページを作りたい。バイト先で単純作業がめんどうなので、エクセルやLINE ボットで自動化システムを作りたい。単純に自分が考える最高のゲーム作りたい。最初にプログラミングがやりたいって子より、何か他の分野に夢中になってて、道具としてプログラミングに頼りたいって子なら習得できる見込みありです。私自身プログラミングを始めた一番最初の理由は「古典文法のゲーム作って、文法の授業を週３から週1くらいに減らし、浮いた時間で面白い古典の授業をやりたい」でしたし。身も蓋もない言い方をすれば、やる気と根性がないとプログラミングは続けられません。
というわけで、この記事では「動機」の部分も大切に説明していきますね。目次としては次の三本です。
・どうしてアプリを作るのか (Why)
・どんなアプリを作るのか (What)
・どうやってアプリを作るのか (How)
ではよろしくお願いします。
・どうしてアプリを作るのか (Why)
現役のころ、教えてる高校生から「古典嫌い」と散々言われて、嫌なことをさせる自分にほとほとうんざりしてました。
一緒にやってた同僚の先生方は、クラスの一人でも古典文法を好きになってくれると満足感を覚えるらしいですけど、🐿は逆に一人でも悲しい顔されると、嫌なんですよね。
(ちなみに純粋に古典文法を好きになる子もいて、その子たちを否定する気は全くありません。まあ解き方わかれば頭の体操みたいで爽快感がありますよね）
嫌なことさせて相手の能力が上がるなら鬼になってやらせますけど、古典文法やることで何の能力が身につくのか全くわからなかったので、文法教えるのが苦痛でたまらなかったです。「どうして教えなきゃいけないんですか？」って聞いても「文科省が定める指導要領に書いてあるから」「大学入試で出るから」「今更古典文法やめると、予備校関係者や古典の参考書作ってる界隈の人が困るから」とかですよ。狂ってますよねw
自分結構古典好きなのです。語りたい古典があって、でも授業では文法しか教えられる時間がなくて、それで苦痛を与えて、好きな古典をボロクソに語られて、めちゃくちゃ悔しかったです。時間があってゆっくり教えてた頃は「今日の時間割、古典、古典、芸術、芸術じゃん。サイコーすぎない？」って感想もらえるほど楽しくできたはずなのに！
というわけで作りたいアプリは二つ。古典文法のゲームアプリか、古典文法要素を捨てた古典の魅力が伝わるアプリです。古典文法のゲーム作るなら、テスト範囲の学習をゲームだけで完結できる先生要らずのクオリティが欲しいですね。また、後者の古典の魅力が伝わるアプリなら、子供がずっと見てるyoutubeや漫画、ゲーム並みの魅力が欲しいところです。🐿は古典好きを満足させるんじゃなくて、「普通の子」を楽しませたいのです。
前者もそのうち作りたいですが、まずは好きなことから。自分の趣味、古今和歌集を題材にしてアプリを作ることにしました。あ、youtubeやゲームほど面白くない。。などのように開発者の心が折るようなことは言わないでくださいねー。
・どんなアプリを作るのか (What)
次はどんなアプリにするのか要件を決めなければいけません。要件定義です。具体的にどんな機能を作りたいのか。大事なのはアプリを使う人をはっきりイメージすることです。誰がどんな時にこのアプリを使うのか。ここをしっかり考えなければ誰も使ってくれないゴミを作ることになります。それでは現状の問題点と、その解決策を箇条書きで考えてみます。
・とりあえず古今和歌集1000首全部読むのはだるい。一首一首気が向いた時に気軽に楽しんでもらいたい。
→1000首一気に表示させるのではなく、10首ランダムで表示させ、一期一会を楽しめるようにする。
・現代語訳や文法読解はだるい。もっと直感的に、現代の感覚で共感してもらいたい。
→その歌にあった写真やキーワードを用意して一瞬で歌の意味を理解させよう。
・気に入った歌にはしおりを挟んで、いつでも読み返せるようにしたい。
→ブックマーク機能をつけて、自分だけのお気に入り歌集を作ってもらおう。
・どうせ作るなら色んな人に使ってもらいたい。拡散してほしい。
→SNSシェア機能をつけて投稿する人を増やし、その投稿にアプリをインストールできるページのリンクを貼ろう。
要件はこんなところですね。現状の問題を見つけてそれを解決するにはどうするのか、問題解決能力が問われます。あとはこれを元にちゃっちゃとデザイン考えればokです。
（ちなみに🐿のデザインセンスは壊滅的なので、正直見た目はダサいです＞＜ 恥ずかしい。。。）
・どうやってアプリを作るのか (How)
「アプリってどうやって作れるようになるんですか？」
「アプリを作っていれば作れるようになります！(^q^)」
ふざけた答えを返すなと怒られそうですが、プロのエンジニアに聞いても十中八九こう返ってくると思います。
実際に作り始めると色んな疑問がわくと思います。このアプリの機能を真似したいとか、エラーが出て動かなくなってしまったらどうしたらいいの？とか。そういうの全てネットをググれば答えが書いてあります。どんな悩みでも必ず世界中で同じように悩まれており、その中の何人かがどうやって解決したかをブログ残してくれてます。それを調べながら作っていくうちにいつの間にか自然に作り方を理解し、作れるようになるというわけです。
最初は答えが出てこないかもしれませんし、記事を読んでも意味がわからないかもしれません。時には英語の記事にしか答えがないかもしれません。でもあきらめず続けていけばいつか理解できます。そういう意味でプログラミングに必要な能力はググり力より根性ですね。全くのど素人でも1日八時間の勉強を１ヶ月〜半年続ければ、へなちょこでも動くアプリが作れるようになります。受験勉強より簡単じゃないですか？
🐿も最初はワード・エクセル・パワーポイントしか使えなかったので、初心者用の学習サイトに課金して基礎の基礎を学びました。おすすめはprogateとドットインストールです。
どちらも月額1000円前後の課金が必要ですが、絶対に元が取れます。下手に教科書や参考書を買うよりこちらの方がおすすめです。期間を決めて短気集中で学ぶことをおすすめします。
次にアプリの構造について解説していきます。アプリの構造は大きく分けて３つに分けられます。
１、見た目（フロントエンド）
２、裏側の処理（バックエンド）
３、データベース（アプリの中身）
１、見た目（フロントエンド）
まず１の見た目について説明しましょう。
古今和歌集、1000首以上あるのですが、一首ずつページを作らないといけないのか。そんなめんどくさいことしなくていいです。次の３枚の画面を見比べてください。
なんとなく似てません？
実はこれ、中身のデータが違うだけで、外枠は同じものを使っています。一つ枠を作ればあとは1000回同じものを使い回せばよいというわけです。あらかじめ作ったデザイン通りにボタンや枠線など「部品」をぽちぽちと並べ作っていきます。このようにアプリの見た目を作っていく作業のことを「フロントエンド」と言います。
２、裏側の処理（バックエンド）
部品を置いただけではボタンを押しても何も起きません。ハートのボタンが押されたら、データを保存するブックマーク機能の処理を働かせる。などのように裏側の処理を書いてあげなければいけません。このように、裏側で動く処理を用意する作業をバックエンドと言います。
ちなみに最近は相当進化しておりまして、大体の機能は自力で作らずともネットのコードをコピペするだけで作れるようになりました。カレンダー機能もカメラ機能も地図機能も、数行のコードで実現できます。欲しいアプリがあれば自分で作れる時代です。
３、データベース（アプリの中身）
タイトル、和歌の原文、意味、詠み手、鑑賞文。これらデータを貯めておき、検索に応じて提供してくれるデータベースを用意しなければいけません。そしてその前にデータを用意しなければいけません。
このアプリではこちらの古今和歌集サイトにデータをお借りしました。古今和歌集の部屋
🐿が大学生だった時からずーっとお世話になっているのですが、🐿のようななんちゃって古典好きにとっては最高のサイトです。詠み手の紹介から一首一首の鑑賞まで細かく丁寧に研究されています。本来ならサイトの製作者に一言許可をもらうどころか二言も三言もお礼を言って借りなければまずいわけですが、お問い合わせページが機能しておらず勝手に使用しています。代わりに宣伝させてください。すごく良いサイトです！（いつか著作権のウンタラカンタラでアプリが消されるかもしれませんが、その時は察してください。）
こちらから一首一首、原文や、意味などをグーグルスプレッドシート（グーグルが作ったエクセルのようなものです）にコピー＆ペーストしていきます。
コピぺ、コピペ、コピペ。。。。
……めんどくさいのでこの段階でスクレイピングを覚えました。
スクレイピングとはwebページの文字を勝手に収集してくれるプログラムのことを指します。
今回コピペしまくってたこのwebページをみてください。他のページと見比べるとわかると思いますが、要素要素は同じものを使っていることがわかります。
1の文字、２の文字、３の文字、４の文字、５の文字をそれぞれロボットプログラムがコピペしてスプレッドシートに貼り付け。終わり次第自動で次のページにいってまたコピペ。という技術をスクレイピングと言います。
というわけでプログラムを書きました。コード数で言えば40行くらいです。簡単簡単o(^▽^)o あとはスタートボタンをポチッと。参考動画がこちら↓
みるみるうちにロボットが書き込んでくれます。待ってる間はのんびりお茶でも飲みましょう。楽チン楽チン😆
ちなみにこのやり方に気づくまで200首くらいは人力でコピペしまくってました。あの時間はなんだったんだろう。。。
このままだと文章だけのアプリになってしまうので、それぞれの歌の雰囲気にあった写真やキーワードを🐿が一首一首心を込めて探します。ここも自動化！と言いたいところですが、さすがにコンピュータがいい感じの写真を選ぶことはできません。🐿が丁寧に選びます。ここが一番大変な作業です。
……結局1000首全部やり切るのは難しく、一旦春と夏の巻だけリリースしました。後の巻はおいおい配信していくので気長に待ってくださいね。
さて、データが完成したので、あとはデータベースに流し込みます。データベースのサイトに行って、ぽちぽちとデータを登録。データを登録。データを登録。。。
…….やっぱりめんどくさいので自動化しました。グーグルスプレッドシートにはGASという自動化システムがついており、コードを書くことができます。
というわけで書きました！ コード数で言えば30行くらいで、慣れれば2,3時間で完成します。あとはボタンポチで1000首が一気にデータベースに登録されるわけです。
余談ですが、先ほどからあえて「めんどくさい」を連発しています。プログラミングにおいて「めんどくさい」に気づけるのはとても重要なのです。プログラマの三大美徳は「怠慢」「短気」「傲慢」です！ めんどくさいに気づけない真面目な人だと、全部人力でやろうとして結局時間をかけてしまいます。「いかに楽をするか」「いかにサボれるか」を考えられないとそもそもプログラムが生まれないというわけです。🐿は未熟な真面目ちゃんなので自動化を思いつくまでに、200首も無駄にコピペしてしまいました。。
というわけで、見た目、裏側の処理、データベースを作り切ったので、あとはapple社に提出してアプリは完成です！ 仕事の合間にちまちま作り、3ヶ月くらいかかってしまいました。
実際、アプリなんて誰でも作れます。1日八時間の勉強を1ヶ月~半年続けるだけです。誰でも作れるからこそ、「何を作るか」「どんな問題を解決したいのか」という発想や個性が試されます。プログラミング教育の本質はそっちじゃないかなあ、と🐿は思うのです。
プログラミングは確かに魅力的な技術です。それでも🐿は古典教育を真面目にやろうと主張します。役に立つプログラミングなんて教えずとも必要になれば自力で学べます。学校では人の気持ちや人生観、価値観を古典で学んでほしいのです。
なんてことを考えながらアプリを作りました。プログラミング教育に悩む教育関係者に届けばいいな。がんばってくださいー。
しつこく宣伝！ 気になったらダウンロードして遊んでください。
