EdTech エドテック テクノロジーで教育が変わり、人類は「進化」する
EdTech エドテック テクノロジーで教育が変わり、人類は「進化」する
- 作者:山田 浩司
- 発売日: 2019/12/12
- メディア: 単行本（ソフトカバー）
読んだ。
小学生向けプログラミング教材を提供する株式会社キュレオへの異動に伴い前チームからいただいた送別の品。
Web業界でのエンジニアリング経験は気づけば10年ほど経つものの、教育分野に足を踏み入れるのは初めてのこと。ということで記録を残しておく。
所感
ふわっとした概念である”エドテック”の解像度が上がる、ザ・入門書です。教育現場の移り変わり、現代の日本の一斉教育に至る背景、そして今後のIT活用シーンなど、具体例を頻繁に用いて網羅的に解説しています。学生時代を懐古し「確かにそうだったな」と納得する一方、今後の教育現場は自分たちの固定概念を取っ払って接する必要があることをまざまざと感じました。
まだまだエドテックに関する課題があることから、すぐに全面的にICTを取り入れることが難しいことはわかりました。エドテックのメリットは挙げればキリがないが、それを現場に導入することは容易ではないし、その課題感（電子機器なので故障やバグはつきもの）も正しくそうだろなと思います。
私は教育現場には一切関わってきていませんが、2児の母であり、ITとりわけWeb業界には約10年前線でtoCアプリケーション開発を行ってきた身として、テクノロジーを活用したソリューションをユーザ目線で提供していく。という近い将来の使命に具体性を帯びたことが大きな収穫です。
幸いにも（？）日本はエドテックに対する取り組みが非常に遅れておりまだまだ黎明期ということで、業務でも立ち上げや黎明期の部署を多く経験してきた者として今後の展望にわくわくしています。
抜粋
個人的に響いたセンテンス、その章の概要を中心にピックアップ。
ピックアップしたものは、「確かに！目から鱗（主に教育分野）」の意味もあれば「ほんそれ。わかる。（主にIT分野）」の意味もあります。
中でも最も印象深かったのは アダプティブ・ラーニング についてでした。日本の従来の1クラス同時進行では6割のノーマルに向けて行われ、残り2割のエリートと2割の落ちこぼれは授業の進度が心地よくないと。その4割もが、学ぶことが楽しいと思える世界を創ることこそエドテックの真髄だよなと。もちろんアナログでも補填は可能ですが、限られた人しかできなかったそのサポートを、より多くの子が享受できるようになると。
ということで以下ずらっと抜粋です。
第1章『教育×テクノロジー エドテックとは何なのか？』
エドテックはマイノリティーを救う
- 現代のITツールは、何よりも時間と場所の制約を取り払って、みんなと同じ時間に同じ行動を取りにくい、身体の不自由な子どもたちに福音を与えるもの
- エドテックのテクノロジーは何よりも、従来の教育環境が取りこぼしてきたマイノリティーの子どもたちを救う術になる
エドテックは各自のペースに合わせた学習を可能にする
- 一般に、人間でもアリでもハチでも、一定の集団ができると、2割のエリートと6割のノーマルと2割の落ちこぼれに分かれるといわれています。（中略）学校の授業の速度は、6割のノーマルの生徒に向けて行われることが多いですから、2割のエリートはわかっていることを延々に聞かされて退屈しますし、逆に2割の落ちこぼれは授業のスピードについていけなくて戸惑ってしまいます。
- 教育における時間と場所の制約を取り払うことができるエドテックでは、映像授業やアプリの使用によってそれぞれの生徒がそれぞれ自分の習熟度に合った学習が可能になります。
- 近年の教育改革は、現代の環境に合わせて、よりクリエイティブな人間をつくろうと努力してきましたが、その延長線上に位置するのがエドテックの活用です
- 一斉授業は、授業の速度に対して「落ちこぼれ」たり「浮きこぼれ」たりする一定数の生徒に忍耐を強いることで成り立っています。
教育の「見える化」で学習効率が向上する
- 古代メソポタミアではわざわざ粘土板を作って、そこに文字を刻むかたちで帳簿をつけていましたし、現在もなおすべての会社で、簿記にはかなりの人件費とコストをかけています。（中略）学校では出席やテストの点数を記録して、通知帳という形で子どもたちの成長を家庭と共有します。なぜそこまでしてデータを記録するのかといえば、分析して次の試みに役立てたり、次に起きることを予測したりするのに必要不可欠だからです。
教材の低価格化で、自分に合った学習環境を選ぶことができる
- 教育費の低廉化は政府も国民も誰もが望んでいることです。（中略）経済的格差があっても学習内容に差が出ないようにとさまざまな用途で公金を支出しています
- ユーチューブという動画配信プラットフォームができて、誰もが自由にコンテンツを配信できる時代がくると、学習コンテンツの価格破壊が起きました。
第2章『エドテックによって起こる教育イノベーション』
すべてがインターネットにつながるエドテックのIoT
学習のくせや苦手を解析するエドテックのビッグデータ
- 現在のスマートウォッチは、24時間ユーザーの心拍数と血圧を測定することで、どの時間にどれだけ深い眠りに入っているかを判断して睡眠の質を分析できます。そのデータを取得することで、睡眠の質が翌日の学習の質に与える影響を測定することができるでしょう。
学習を楽しく効果的にしてくれるエドテックのVRとAR
- そのうち、歴史の年号は、VR空間に作り上げられた歴史の事件に参加しながら自然と覚えるものになるかもしれません
第5世代（5G）無線通信規格で起きるエドテックのパラダイムチェンジ
- まず、配信するコンテンツの表現力が増すことが考えられます（中略）黒板やホワイトボードの文字が小さくて読み取れないということもなくなるでしょう
- 物理的に移動せず遠隔地で授業を受けてもその質を落とさずに済むのは、それだけの情報量を転送できるだけの通信規格である5Gの実用化を前提にしています
- 日本の教育現場におけるエドテックへの取り組みは、正直に申しますと遅れています。例えば、教育現場でのWi-Fi普及率は、2015年度に日本が26%であるのに対してアメリカでは88%（中略）2020年度から本格的に始まるエドテックへの取り組みを、ぜひみなさんの力をお借りして盛り上げていきたい
第3章『米国で始まり日本へ次々と生まれるエドテックサービス』
オンライン講義の配信①カーン・アカデミーの誕生
- なんといっても無料で質の高い授業が受けられることが、視聴者には何よりのメリットでした。これがエドテックのオンライン講義配信の始まりです
- そうして1年後の2010年9月、ビル＆メリンダ・ゲイツ財団からカーン・アカデミーへの出資が決定し、サルマン・カーンさんはお金の心配から解放されたのです
オンライン講義の配信②アメリカでのMOOCの広がり
- 学生がお金を払って受けている講義を、インターネット上で無料で公開するわけにはいきませんから、当初は学生向けの内輪の試みに過ぎなかったのです。けれど、心ある教員は知が閉鎖的なものであってはならないと考えていました。大学は社会の公共物であり、その成果は広く社会で共有すべきではないかと考える人も少なくなかった
- しかし、大学の機関であるエデックスは非営利組織ですが、ユダシティとコーセラはいずれも営利企業です。最初は無料でユーザーを集めても、いずれは収益化しなければなりません。
オンライン講義の配信③アメリカにおけるMOOCの課題
- 一つ目の課題は、オンライン講義の受講生の修了率が5~6%前後と、非常に低いこと
- 二つ目の課題は、受講生の質の改善
- 三つ目の課題は、先程も触れたようにビジネスモデルの確立の難しさです
オンライン講義の配信⑤無料サービスの功罪
- 「地理的・経済的な教育格差をなくす」とうたって創業したマナビーは、NPO法人となりましたが、それでも事業継続のための収益化が十分にできずにつぶれてしまいました。同様の方針を取っているカーン・アカデミーは、アメリカには寄付文化が根付いていることと、ビル&メリンダ・ゲイツ財団という世界最大の慈善団体の目に留まったことで運営を続けることができました。これが日本とアメリカの違いです。
- 人間は無意識に、無料のものには価値がないと感じてしまいますから、無料で手に入れた教材では熱心に勉強できないのです
オンライン講義の配信⑥日本における大学生と社会人教育
- 日本では小学生から高校生までのオンライン授業は、受験産業のサービスとなりました。では、大学生や社会人向けのオンライン授業はどうなっているでしょうか。
- 日本版MOOCは、（中略）その平均年齢は46歳と、学び直しをしたい社会人からの関心が高かった
- 2018年のJMOOCの調査によれば、学び直しの手段として「WEBでの無料講座」が「書籍による自主学習」を初めて上回る
先生や生徒のコミュニケーションを促進する①エドモドとセンセイノート
- ITは社会にさまざまな恩恵をもたらしましたが、最も大きな貢献は、コミュニケーションの敷居を下げて、その量を増やして私達の生活を豊かにしてくれたこと
- エドテックも教師と生徒間、生徒と生徒間、そして教師と教師間でのコミュニケーションを増やすことに役立ちます
- 宿題を配信してやってもらうとともに、AIに自動採点してもらって記録を集計したり、補修問題を追加で配信したり
先生や生徒のコミュニケーションを促進する②生徒の学習意欲を高めるスタディプラス
- スタディプラスのような学習支援アプリが、受験生本人たちに大人気なのは、コンテンツはいくらでも親が買い揃えてくれるけれども、自分自身にやる気を起こさせる方法が見つからなかったというニーズを的確にとらえたからでしょう
学習を効率化する①アダプティブ・ラーニング（適応学習）とは何か
- これまでのアナログの学習環境にはいろいろと非効率（中略）一例を挙げれば、日本の小中学校のクラス編成です。小学生、特に低学年の学力には生まれ月や発達度合いによって相当の差があるのに、能力別にクラス編成をすることもなく一律に同じ授業を行っています。そしてだいたいクラスの平均値に合わせて授業を進めていきます。その結果、クラスの中の理解の速い子は授業を退屈に感じ、理解の遅い子は落ちこぼれてやはり授業が退屈になってしまいます。
- もし本当にそのとおりに全員が理解できているなら、学期末のテストの点数は全員が100点、うっかりミスがあったとしても90点くらいを取っていなければならないはずです。しかし実際には、テストで20点とか30点を取る子が当たり前のようにいます。（中略）にもかかわらず、小中学校で留年をする子はほとんどなく、なぜか全員が一斉に同じ年齢で、横並びで進級して卒業していきます。（中略）小学校の授業内容を理解できないままに中学校に上がったとしたら、本人が自分の努力で小学校の内容を復習しない限り、中学校の授業内容についていけないからです。そして日本の公立中学校では能力別のクラス編成はありませんから、いったん授業についていけなくなってしまえば、そのあとの授業はすべて無になります。
- 本来あるべき理想の学習とは、一つひとつの単元をしっかりと理解してから次の単元に進むものです。ところが、期間があらかじめ決められている日本の小中学校ではそれができません。いきおい、生徒たちの知識はところどころが欠けたままとなり、その上に新しい知識を積み重ねていくので、土台が不安定で崩れやすいものとなります
- エドテックはこの学校の限界を超える力を持っている（中略）私がエドテックにこれほどまでに期待をかけているのは、それがより多くの子どもたちにメリットをもたらすと信じるからです
- アダプティブ・ラーニングとは日本語に訳すると「適応学習」となります。それぞれの子どもの習熟度や理解度に適応した内容を与えて指導していく学習方法を意味
- 現在のAIには限界があるとはいえ、その子が間違えた問題の間違え方を分析して、つまずいているかもしれない問題を過去にさかのぼって探し出し、出門することぐらいはできます。
- 大切なのは、全員を同じクラスに入れて平等に扱うことではなく、たとえ途中の段階では進度に速い遅いが見られても、最終的に全員に平等に基礎学力を身に付けさせること
学習状況を管理するラーニング・マネジメント・システム（LMS）とは何か
- LMSによって大量のデータを一つにまとめられるようになると、ビッグデータの分析がしやすくなってアダプティブ・ラーニングを進めることができます
- エドテックの事業はまだ黎明段階にあり、最終的にどの企業、どのサービスが覇権を握るのかはまだまったくわかりません
第4章『小学校、中学校、高校、大学…教育機関にもたらされる変革』
教育のICT化のメリット
- デジタル教科書は、紙の教科書に比べて表現力の次元が異なります
- 総じて、紙幅や価格の都合で図版が少なく文字ばかりの紙の教科書よりも、デジタル教科書はコンテンツとして優れています。実際に小中学校にタブレット端末を導入しての実証研究の報告書を見ても（中略）成績も向上する結果
- 電子黒板（中略）なにより、用意した教材を一瞬で画面に映し出すことができるので、教科書を見ながら問題や図を黒板に書き写す無駄な時間がなくなります。（中略）教材作成や授業の指導にかけられる時間が長くなるでしょう
- エドテックの本質は可視化（見える化）にあります。教育現場の見える化は、探究心と向上心が強く、PDCAを回すことができるような教師にとっては大きなメリットです
教育のICT化のデメリット
- 機械には故障がつきもの（中略）故障のリスクは、教室に備え付けの電子黒板よりも、子どもたち一人ひとりに配るタブレット端末のほうがより高くなります
- デジタル機器の故障で怖いのはデータの消失です
- ICT機器のデメリットは、デジタルコンテンツの表現力の高さによる学習効果とトレードオフ（中略）できるだけリスクを避けたいという判断をする人がいても責めることはできません
- ICTリテラシーのない人にICT機器を与えた場合、やはりサポートが大変ですし、トラブルの際にパニックになることが予想されます。ICT教育がある程度進むまでは、大々的な予算を使っての全国的な導入は、特に小学校においては難しいでしょう。
オンライン講義は反転授業のために必要なもの
- 反転授業では、まず学校の授業の前に、オンライン講義の映像などで、新しい単元の予習を先にしてもらいます。知識の習得は自学自習で先に行ってもらうのです。
- 自宅でオンライン講義で予習→教師による授業で覚えた知識の実践、という反転授業のほうがより深く知識を定着させることができて、学習効率が良いのです
- これが、エドテックを利用して従来の授業をアップデートした、今人気の新しい授業です
反転授業はなぜ有名になったか
- 録画講義は好評でした。欠席した生徒ばかりでなく、出席していたけれども話を理解できなかった生徒も復習のために録画を見るようになりました。（中略）この結果を受けて、サムズさんは次のように考えるようになりました。「生徒にとって、本当に僕の存在が目の前に必要になるのは、勉強につまずいて個別の手助けを求めているときだ。おおぜいに向けて内容を喋るだけなら、教室で対面する必要はない。」
- 生徒たちの成績は向上し、授業時間が余るほど、効率も良くなったのです
- しかし、この反転授業の普及がなかなか進まないのは、難点があるからです。（中略）やる気のない生徒に毎回授業の前にそれを見せて理解させるのは非常に困難です。結果として、予習をしてきた生徒だけが授業に参加できて、予習をしてこなかった生徒は授業内容をまったく理解できず
オンライン講義があれば完全習得学習が実現できる
- エドテックにおけるもう一つの新しい概念である「完全習得学習（マスタリー・ラーニング）」の実現を手助けします。完全習得学習とは、生徒が確実に学習内容を習得しながら学習を進めていくものです。
完全習得を助けるアダプティブ・ラーニング（適応学習）
- アダプティブ・ラーニングとは、それぞれの生徒に合わせた問題や指導を行う、完全習得学習にマッチした教育方法
オンラインとオフラインとをブレンドしたミネルバ大学の人気
- このようにICTを利用することで、ミネルバ大学は”同じ場所にいてもコンピュータを通して会話するほうが便利”という状況を作り出しました
第5章『エドテックが教育と人類を「進化」させる』
エドテックの3つの特徴
- エドテックの3つの特徴を3つあげるとするならば「データ化」と「可視化」と「効率化」です
教師の役割はどのように変わるのか
- エドテックは従来、教師が担ってきた仕事の一部を負担することで、教師をクリエイティブな教育に専念させてくれるかもしれません。日本の教師は事務作業が多く、激務だといわれています。（中略）教材作成や生徒指導に集中したい教師にとって悩みの種となっています。
- 合理的な考え方をするフィンランドでは、すでに2016年度から小学生のプログラミング教育が必修化されるなどICT教育が進んでいますし、教員の負担を減らして生徒の学力効率を高めるためにエドテックが積極的に導入されています
- そもそも、教員の仕事は生徒への学習指導にあるのに、学校運営や事務仕事までさせるのは本当に正しいのでしょうか。日本の子どもたちの学力が落ちているといわれている現在、エドテックを利用して、教員の負担減少を図るとともに、生徒への学習指導を重点的に強化していくことが正しい道
エドテックは教育格差を解消する
- 東大生の親の年収が、一般の同世代の親の年収よりも著しく高いことがしばしば話題になります。（中略）経済格差がそのまま教育格差につながり、本来は東大に入学できるような優秀な頭脳を持っていても、十分な教育を受けられる環境になかったために、あるいは大学進学という選択肢が視野にあまり入らなかったために、埋もれている子どもをつくっている可能性がある
- このような教育格差、経済格差、地域格差、情報格差は、エドテックによって解消できます
ライフログと学習履歴で個人が正当に評価される社会をつくる
- ITの進歩とインターネットは、世の中に埋もれていた多くの価値に光を当ててきました
- 教育が最終的に成し遂げたいことは、それぞれの生徒がそれぞれの人生を幸せに生きられるようになることです。受験合格で終わる教育は、真の意味での教育とはいえません。就職や結婚、さらにはその先の人生を幸せにすることが、私の教育の目的です。
父が立ち上げたNPO法人のWebサイトをSquarespaceで制作した話
育休中自由研究プロジェクト第三弾*1
父が新しく立ち上げたNPO法人のWebサイトをSquarespaceで作ってみたよ！というお話。
何を作ったのか
雨水まちづくりサポートという非営利活動法人のWebサイトです。
この団体は簡単に言うと、雨水に関する法律が施行されたことにあたり、その資格作りや普及、技術支援などを目的としたNPO法人です。*2
水資源：雨水の利用の推進に関する法律について - 国土交通省
この立ち上げを、建築士であり雨水の専門家である父が任されたということでサイト制作の相談を受けたのがきっかけ。*3
なぜSquarespaceなのか
自由研究と言えども今回はいちNPO法人のサイトなのであまりにお粗末なサイトを作るわけにはいきません。とは言え育児の片手間1人でゼロベースで制作することは非現実的です。
そこでオウンドメディアですよ。2017年ですもの、静的Webサイト作るのにレンサバ借りてドメイン取って。なんてもうやらなくていいんですよ。ありがたいですね。
中でも特に魅力的だった理由は下記の2つ。
提供元のロゴを入れたくなかった
自社サービスであるAmebaOwndは完全フリーですがPowered by Owndは取り除けないようです。今回は法人サイトなので有料でもロゴが入らないものを選定する必要がありました。
ちなみに。大学生の頃に作った何とも古めかしい父の会社サイトはオウンド研究がてらAmebaOwndに移してみました。*4（未完成）
仕事で使っていた
これがけっこう大きくて。私個人は触ったことなかったのですが産休前に働いていた部署で使っていました。復帰後でも無駄にはならないかもしれない経験というのは大きな選定理由です。
Squarespaceの良かったこと、大変だったこと
Squarespaceの使い方に関しては触れだすと果てしない量になるので公式ドキュメントを見てもらうとして。ここでは個人的な良し悪しについて触れようと思います。
良かったこと
コミュニティが充実している
ヘルプやQ&Aサイトが驚くほど充実しておりほぼすべての問題がこれらで解決に至りました。
サイト制作からドメイン取得までワンストップでできる
Squarespace内でドメイン取得から反映が可能なので立ち上げがめちゃ簡単。*5
かゆいところに手が届いている
細かい話になりますが。Squarespaceでは基本的にGUIで部品（Block）を置いて作っていくのですが、Code Blockではちょっとしたコードを挿入することができます。
例えばこのCode Block内のエディタがけっこう良くできてる。
シンタクスチェックやオートインデント、タブインデントなどが普通に効く上に私得なEmacsキーバインドにも対応してるのでIDEで開発してるのと何ら変わらない体験を得られる。ほら、よくこういうポップアップ内エディタって、tab押すと次のリンクに飛んじゃったりしてイラッとすること多いじゃない。
この細やかな気配りにはいささか感動しました。
開発者向けメニューが充実してる
これまた良くできてるんです。
DeveloperモードをONにするとgitで管理ができるようになります。
さらにさらにローカルでサーバ起動までできるという優れもの。
基本的にGUIでは即時反映されてしまうのでローンチ後にはありがたいですね。
大変だったこと
日本語の資料がほぼ皆無
膨大な量のドキュメントから自分のやりたいことに辿り着ける英語力がないと少し厳しいかもしれない。
日本語フォントがない
font-familyの選択肢に（当然っちゃ当然ですが）日本語フォントは見当たらない。なので日本語Webフォントを当てたい場合は自分でカスタムフォントを追加する必要がありました。
こういったこともanswersで大概解決します。
カスタムCSSを書く場合の留意点
先に述べたCode Blockで独自classを当てることができます。
その際、descriptionとか汎用的なclassを定義するとSquarespaceで元々定義されてる名前とかぶって思わぬところが崩れるといったことがありました。なので自分で定義したクラスにはmy-descriptionのように独自prefixを付けています。
細かいスタイル調整にはハックが必要
例えばニュースのページである問題が発生。
ここは私じゃなくても記事更新できるようにブログの機能を用いたページです。
先に述べたようにタイトルヘッダにはWebフォントを当てています。そのためフォントファイルを生成する際に必要な漢字を予め把握しておく必要がありますが、ブログなのでいつどんなタイトルが入稿されるか予測不能なんですね。
フォントがない漢字が使われると同じタイトル内で部分的にしかフォントが当たらない問題が起こってしまいました。
そこでだいぶ無理矢理なんですが時には下記のような力技を用いる必要がありました。（もしくはがんばって都度タイトルに使われる漢字を含めたフォントファイルをアップし直すか…）
.blog-list h1 {
font-family: "Source Sans Pro",sans-serif !important; // ブログ一覧の時だけデフォルトフォントに戻す
font-size: 24px;
line-height: 1.2em !important;
}
良くも悪くも
型にしっかりはまっている＝デザインの自由度は低い
例えばロゴ。ロゴ／タイトルの設定ページでは画像によるLOGOもしくはテキストによるTITLEしか設定できない仕様です。
これにはタイトルとロゴを同時に設定することは2重の意味を持たせることになるのでNGという確固たる理由があるそうです。
ははん、なるほどね。ということでロゴのみ設定。
一方、父からは「サイトに訪れる年齢層は高い（Webリテラシーが低め）からあまりモダンなサイトにしないで欲しい」とSquarespaceという選択に相反した要望をもらっていました。
ここで何が問題かと言うと「他のページからTOPに戻れないからメインメニューにTOPへという項目を入れるのはどうか」というとんでもリクエストが来たんですね。なるほどロゴを押すとTOPへ戻るという発想がないらしい。
悩んだ挙句ヘルプにもOptionalで書いてある通り画像の中にサイトタイトルも入れるという策に至りました。
制約が厳しいが故に型にはまった綺麗なサイト構成が実現できているのですが、裏を返せばデザインの自由度は低いので、ちょっとカスタマイズしたい時に調べないと実現できない。かと言ってあまりにカスタマイズしすぎるとデザイン崩れやSEOの面でサポートできないとのこと。
結論
広義ではCMSと言えども少し凝ったことがしたい場合にはマークアップやHTMLの知識が皆無だとやっぱり厳しそうです。
またSquarespaceは細かいところまで調整できるのが魅力ですが、コーディング経験がなく英語での問題解決も難しい場合はAmebaOwndで十分事足りると思いました。
マイクロブログCMSを3日でたててみた話
3日でというのは何もミサワ感を出したかったわけではない。
赤ん坊片手に作業するのは3日が限界で、それ以上かかるようならやめようと思っていた。
模倣したサービスはママツイという、ママに特化したTwitter。クローズを嘆くユーザがたくさんいたので、簡単にできるようなら逃げ場を作ろうかなと思った。ベースはTwitterなわけだからきっとCMSぐらいいっぱいあるだろうと。そしたら案外さくっと立てられるのでは？と。
もちろんそんな簡単な話ではないのだけど、何かを作ることに飢えていた私は期限を設けてやってみることにした。
※簡単に、ママツイとは…”いいね”の代わりに”応援する”、”ありがとう”返しがある、ユーザ層に特化した柔らかなUIのTwitterで、Amebaサービスのひとつ
結果、機能はするけどプロダクトレベルには程遠いクオリティのサイトが完成した。
まま、何事も無駄なことはないわけで、せっかく弄ったのでやってみたことの記録です。
やったこと
マイクロブログCMS検討
調べてみたら、いっぱいあった。選択基準としてはやはり情報量。
StatusNetというオープンソースソフトウェアがこの中ではポピュラーっぽかった。
たいしてニーズがないのか、言うほどの情報量はなかったんだけども。
AWSでの環境構築
こちらはだいぶ慣れてきたよ。Docker触ってみたけど結局使わない気がしたので今回は最初からEC2インスタンス上で作業。
Route53でドメイン登録できるようになったらしいので初挑戦。
Hosted ZoneとかあんまりよくわかってないけどワンストップでブラウズできるようになってSUGEEEってなった。
CMS展開
大学生以来のLAMP環境構築。
0208:[ユーティリティ/ポータル]Statusnetをインストールしてみよう！を参考にインストール。
とても簡単だった。PHPのすぐ動くっぷりにびっくり。
# インストール $ sudo yum install -y httpd.x86_64 php.x86_64 mysql-server emacs php-mysql php-gd php-xml php-mbstring $ emacs /etc/my.cnf $ emacs /var/www/html/info.php $ wget http://status.net/statusnet-1.1.1.tar.gz . $ tar zxfv statusnet-1.1.1.tar.gz $ sudo chown -R apache:apache /var/www/html # DB設定 mysql> create database statusnet; mysql> grant all privileges on statusnet.* to statusnetuser@localhost identified by 'statusnetpass'; # 日本語化 $ sudo yum install gettext $ sudo make
文言、日本語修正
立ち上がって見てみてびっくり、日本語が酷い。
”画像”は「アバター」と表現するし、「デフォルトタイムゾーン; 通常UTC。」とか平気で書いてある。まあ直訳なわけです。なので日本語を直してみる。
国際化対応ファイルを弄るだけかと思いきや、そう簡単ではなかった。
locale/ja/配下には.poといったファイルや.moといったバイナリファイルがあった。どうやらStatusNetではgettextというライブラリを使っているよう。.poに日本語を発見したのだが直接編集ができなかった。これを編集するにはPoEditなどのGUIエディタで編集するのが一般的だとか。
リモートのAmazonLinux上で直接触ってたのでちょっとこれは面倒だ。
ということで迷った挙句、grep findで直接phpファイルを編集するという荒業にでた。複数ファイル弄った時点でカオスってきて、もうこの時点でメンテナンス性なんてものは諦めた。どうせ作りっぱなしで数カ月後にインスタンス落とすんだし、いいや。
html、css修正
起動直後はこんな感じの見てくれでした。
http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com
ママツイもどきというぐらいなのでもうちょい似せたいところ。と思いきやどこを探してもHTMLらしきものが記述してあるファイルがないじゃない。探してびっくり、テンプレートエンジン的なものは使っておらず、なんと全てのHTML構造がコード中に記述してあった。 例えばこんな感じ。
{
$this->elementStart('div', array('id' => 'content', 'class' => 'hentry'));
$this->showPageTitle();
$this->showPageNoticeBlock();
$this->elementStart('div', array('id' => 'content_inner', 'class' => 'entry-content'));
// show the actual content (forms, lists, whatever)
$this->showContent();
$this->elementEnd('div');
$this->elementEnd('div');
}
このOSS自体が古臭いにおいは最初からしていたが、衝撃だった。というかどうやってテストしているのだ？表示確認は？逆にやりづらいだろこれ。
と疑問は多く残るものの、しょうがないのでclassやid名からgrep findして該当箇所の見当をつけ、CSSを編集していった。
そんな感じで何となく作ったんだけど、これ以上はどうにもならない問題もあった。
問題点
StatusNet、開発もだいぶ前っぽいし最近メンテされてる感じもなく、とにかくモダンじゃない。
スマホ最適化ができない
1番のポイント。Bootstrapを無理矢理組み込んでみたんだけど、前述のとおりHTMLがPHPコード中にガチガチに組み込まれており、class="container"を1個つけるにも一苦労。今の私のマークアップ力ではデスクトップサイト用に作りこまれたものをスマホ表示最適化するには至らなかった。
認証がモダンじゃない
デフォの登録フォームはこんな感じ。 http://ec2-54-65-67-193.ap-northeast-1.compute.amazonaws.com/index.php/main/register
タイムゾーンとか選ばないといけない仕様。 協力してくれる人が数名いたのだけど、何よりメアドを登録させる（つまり手元に知らん人のメアドがある）時点で個人管理のサイトとしては恐ろしい。このご時世認証はOAuthにしたいものだ。
ということで結論、TwitterクローンのCMS、デフォのサイトをイントラネットなどで使う分には良いだろうけど、今のところ一般ユーザ向けではなさそうです。というお話。
産休中の妊婦もWebアプリつくってみた
6月に第一子が産まれたわけですが、いつ陣痛が来るかドキドキしながら直前まで開発していた記録です。
技術的に凝ったことは一切しておりません。 レスポンシブに拘ったぐらい。
何をつくったのか
捨て猫ちゃんまとめサイトをつくりました。
何の変哲もない至ってシンプルなWebアプリケーションです。
担当美容師にこんなサイトが欲しい！と言われたのがきっかけ。
何ができるのか
捨て猫情報を集約し、各ページにソーシャルボタンを設置。
よく「拡散希望、里親募集」が記載された投稿を見かけるものの、個人の投稿では限界があるのでまとめました。
この手の投稿ってソーシャルと親和性高いはずなのに既存の里親募集サイトってぜんぜんソーシャル要素がないじゃない。少なくとも私にはサイト管理者が手動でアップしてるようなのしか見つかりませんでした。
何でつくったのか
1つは、フロントエンドの実装をやってみたかったから。
もう1つは、Webアプリを公開するところまで、1人で開発してみたかったから。
自分はなにか特定の技術に精通しているわけでもなく、「私って何屋なんだろう？」と常日頃から思ってまして。この産休のタイミングで1人で上から下までやってみようと思ったのです。
制作期間
1日5,6時間で2週間ほど。（最低限の要素完成まで）
※学習、調査、技術選定含む
日によってはもっと短かったり長かったり。
使ったもの
Python2.7、Django、Instagram API、Bootstrap3、Wookmark.js、Fabric、AWS EC2、AWS Route53、Vagrant、Github
やったこと
Day1
- Webサービス作ってみた系記事を読んでモチベートされる
- 捨て猫の情報源探す->Twitterは精度がいまいちだったのでとりあえずインスタに決定
- Instagram API登録, Developerサイト読む
- 利用APIの選定
Day2
Day3
- ローカル開発環境の構築@ドットインストール
Day4
- Vagrantで環境構築->Provisioningツール調査->ChefはオオゴトなのでAnsibleかFabricを調査
- 個人プロジェクトなので最もお手軽なFabricに決定（実際はFabric検証してこれでいっかってなった）
Day5
- クラウド環境調査->ドキュメントの多さ的にほぼAWS一択
- Vagrant+Fabric on EC2での環境構築自動化を試みる
- Vagrant+Fabricの設定
- Vagrant1.5でEC2インスタンスを立ち上げる設定
Day6
- ようやくアプリ開発開始
- RWDについて調べる
- モダンなサイトになるようにBootstrapのGridSystemを読む
- YeomanでBootstrap, Angularのひな形を構築しようと試みる
- yo angularでこける、bower_componentsパッケージが生成されないエラーでど嵌る
Day7
- ローカルでどうしてもできなかったYeoman、VMのCentOS6.4ではちゃんとインストールできる->大したアプリじゃないし時間もったいないのでYeomanは断念
Day8
- Webサーバについて調べる->Apache？Nginx？->結局乗せるとこまで至らなかったが
- Python on Local Web開発のセットアップwith IntelliJ->ログ
- Django, wsgi勉強
Day9
- Django勉強
Day10
- インスタのライブラリPython-instagramインストール、README
Day11
Day12
- Djangoのstaticライブラリ使い方調査(http://hyokonia.tumblr.com/post/7036722697/django-staticfiles, http://d.hatena.ne.jp/nullpobug/20120921/1348153563)
- マークアップ、Bootstrapでコーディング
- Bootstrapのテーマを導入
- 画像表示をPinterestライクにしようとWookmark.js
- js不慣れでけっこう嵌ったので、http://bosssato.hatenablog.com/entry/20120701/1341121636とかhttp://blog.shuffleee.com/1793/とか参照
Day13
Day14
- 修正、整形->最低限の形にはなる
空き時間に
- ソーシャルボタン追加したり
- インフィニティスクロール仕様にしたり
振り返って
- 構成管理ツールの調査やプロビジョニングに時間かけた割に、インスタンス破壊したり作り直したりはほぼしなかった。勉強にはなったので無駄とは思ってない。
- やはりフロント周りに難あり。ページのauto reload後、appendしつつBootstrapのスタイルがどうしても当たらなくて無理矢理スタイリングしたり。（未解決なので誰か助けて欲しい）
- 個人のしがないWebアプリのため、技術選定の際は最も手とり速いものを重視して選んでしまった。臨月だったので出産の期限が迫ってたことも一因。
- どれもこれも薄っぺらい知識しかないけどプロトタイプぐらいは作れそう。
- 防衛的にベータとか付けたものの、メンテする予定はない。というか初育児につき現在その余裕がない。
- 開発当初は里親マッチングとかできたらいいなと思ったけど開発以外の問題で難しそうだ。
OSCON2013に行ってきた
海外のITカンファレンスには初めての参加だったので、初参加なりの感想を書き留めておきます。
予想外だったこと
考えてみれば当たり前なのですが、ユーザカンファレンスではないのでセッションはプロダクトの紹介が多いです。
参加前は「ここでしか聞けないあのサービスのテクニック…！」的なものを勝手に期待してましたが、結果的に目から鱗みたいなものはありませんでした。
びっくりしたこと
毎朝Keynotesという基調講演があるのですが、そこにホワイトハウスのお偉いさんが登壇してたこと。
よかったこと
開発の中の人が直接話す
Spring Frameworkの開発者やJavaEE/GlassFishのエバンジェリストが直接プロダクトについて話すこと。内容はプロダクトの紹介なのですが、普段使ってるFWなりツールなりを開発してる人が目の前にいるってだけで興奮しますよね。まあそれに見惚れてると聞き取れずに終わってしまうのですが。
OSS界のトレンドを広く浅く知れる
「ここは引き続き追っていこう」とか「こんなツールが流行ってるんだ」などの発見がありました。
よくなかったこと
会場が寒い。とにかく寒い。骨と皮だけの日本人にはあの温度に耐えられず、我々だけ真冬の装いでした。
おまけ
SFでSUGEEEってなったもののひとつがSquare。タクシーはみんなこれでした。
クレジット決済が面倒だっていう小さいお店とかは導入してみたらいいと思う。帰国後早速買ってみたけど導入すごく簡単でした。
