はじめに
これまで私の勉強方法といえば、動画や本に書いていることを、紙のノートやブログにまとめて書くというものでした。
しかし、書いたとしても見返すことはなく、見たいと思ってもブログやノートのどこに書いてあるのか分からずに止めてしまうという問題がありました。
そこで、スマホアプリのように素早くページを表示でき、見たいページを素早く探せる。かつ、書きやすいエディタを備えている何かを作りたいと思い、ノートアプリを作ってみました。
何で作ったか
使った技術はWordPressとionicで、アプリのホスティングにはFirebase Hostingを使っています。
目次データだけはgithub.ioに設置し、アプリから取得して目次を表示しています。
ionicはまだあまり普及しているという感じはしませんが、一言でいうとwebアプリもスマホ(iphone,android)アプリも一つのHTML/JavaScript(TypeScript)コードから作れてしまうというものです。
最近流行っているものではReactNativeが近いでしょうか。
詳しくは知りませんが、裏ではCordovaが動いており、Angularベースでアプリを作っていきます。
WordPressは記事を書いて保存しているだけです。普通にブログを書く感覚で書いています。
WordPressを動かしているサーバは、無料でSSLとプラグインが使えるxreaというところです。
他にも未来サーバやxdomainなど試したのですが無料枠内ではプラグインが使えなかったり、SSLが有料だったり、最終的に行き着いたのがxreaです。
どんなアプリか
今回作ったのは、こんなノートアプリです。
- トップページ
トップページはカテゴリを選ぶページです。
いろいろありますが、ちゃんと埋まっているのはまだHaskellだけです。
圏論は図が大切なので、カテゴリを作ったはいいのですがこのアプリとは相性が悪かったです。
- 詳細一覧
詳細ページへのリンク一覧です。
ここに出ている名前は記事のタイトルと一致するようにしています。
- 記事ページ
WordPressで書いた記事をAPIで取ってきて表示させています。
使い方
まずは勉強します。
勉強した内容はWordPressで作ったブログに記事を書いて保存します。
次に、gitで管理しているjsonファイルにタイトルとIDを記述しておきます。
IDはWordPressが発行するIDで、APIから記事を取得するときの記事IDとなります。
jsonファイルの中身はこんな感じです
[
{
"name": "haskell",
"title": "Haskell",
"topics": [
{"title": "始めの一歩", "id": "31"},
{"title": "関数呼び出しと定義", "id": "33"},
{"title": "if文", "id": "35"},
...
]
},
{
"name": "haskell2",
"title": "Haskell(モジュール～)",
"topics": [
{"title": "モジュール", "id": "133"},
{"title": "モジュールのインポート", "id": "135"},
...
]
}
]
ある程度勉強したらjsonファイルをコミットしてgithub.ioへpushします。
このjsonファイルはカテゴリページのカテゴリ一覧と詳細一覧の記事タイトルを表示する際にgithub.ioから読み込んで使います。
作ってみた感想
今回初めてionicでアプリを作ってみましたが、これぐらい単純なアプリであればionicの入門書を一通り読むだけで作れました。
また、当初はネイティブアプリにビルドしてスマホアプリとして使おうと思っていたのですが、作ったwebアプリをスマホのホームに追加することで、まるでネイティブアプリのように使えることに驚きました。
いまでもネイティブにビルドせずに使っています。
また、scssでデザインを自由に変更できるので、フロントエンドエンジニアの方やJavaScriptも書けるwebデザイナの方々でもすぐにionicでアプリを作れるようになると思います。
アプリ自体も我ながら使いやすいと感じています。
隙間時間にぱっと記事を読むことができ、どこに見たい記事があるかもすぐ分かるので作りたいもの通りのアプリができました。
ionicアプリ側のソースはこちらです。
https://github.com/suotani/study-log-ionic