文献検索Webアプリを作ってみたので、その開発過程をメモしました。
本業とは別の個人的な活動として、ニッチな便利アプリケーションを作るのが趣味。過去に、Windows用のキーボードカスタマイズソフト「enthumble」を開発した。これはわりとヒットしたと思う。
Webアプリ
RefPapers | Find the Paper. With the Numbers.
http://refpapers.com/
ライフサイエンス系の論文を、素早く参照できる無料Webアプリ。
数字だけで論文を絞り込めるのが特徴。
開発経緯
最近、論文を書くためにたくさんの学術文献を読んでいる。そこで最もイライラしているのは文献の検索。論文を探すのはかなり面倒くさい。今すぐ参考文献を読みたい、と思っても、文献取得という「作業」に中断される。この作業は、Google Scholarでもうまくいかない。
・現状の論文検索
タイトルなどを途中まで入れて論文を検索する
→ヒットしない
→キーワード追加
→ヒットしない
(→あきらめる)
・理想としては
論文を読みながら引用文献を検索
→その場で要約をネットでチェック
こんなふうに、面倒なくサッと論文を検索したいと考えていました。
発想
「本」の検索方法をヒントにした。本は、ISDNバーコードで冊子を特定し、ネット情報にアクセスできる。
論文にも数字の羅列情報があればいい。そういえば、論文の参照情報には、出版年とページ数がほぼ必ず記載されている。これって数字の羅列だから、バーコードみたいなもんだ。これを手がかりに論文を絞り込めばいいのかも？！
既存の文献検索アプリ(Web, iOS)を片っ端から試したが、私のような数字だけで絞り込むっていうアイディアはまだないようだ。ここで開発を決意?した。
開発
準備(1日)
ラフ画を描き、実装したい機能を書きだした。普段使いしてもらえるように、手に馴染むサービスがいい。PCやネットがあると気が散るので、図書館で書いた。
コンセプトの確認(2日)
論文データベースPubmedのAPIをいじってみた。論文データを数字だけでが絞り込む、というコンセプトを確認した。実はJSやXMLを本格的に扱うのは初めてってこともあり、おもしろかった。
・参考にしたWebサイト
E-utilities Quick Start - Entrez Programming Utilities Help - NCBI Bookshelf
http://www.ncbi.nlm.nih.gov/books/NBK25500/
自分のWEBサイト上でPubMed- 人力検索はてな
http://q.hatena.ne.jp/1177119852
PubMed API解説 PubMed APIのまとめ
http://yubais.net/doc/pubmed_api/
pubmed IDから論文のリストを作ろう（調査編） - Qiita
http://qiita.com/maoringo/items/b2f587281b577042b8ef
JavaScript - PubMed IDから論文のリストを作ろう（実装編-その１） - Qiita
http://qiita.com/maoringo/items/065e3a394397dd5c001c
JavaScript - PubMed IDから論文のリストを作ろう（実装編 その２） - Qiita
http://qiita.com/maoringo/items/b4bbb99f5f6d0b7747fe
ドメイン取得
モチベーションを維持するため、早々とドメインを取得した。お名前.comでドメイン空き状況を検索。citation、reference、Paper、getなどを軸に調査。たまたま空いていた、RefPapers.comを取得した。ドメイン取得分の投資(1,000円)をしたので、少しモチベーションがあがる。
プログラミング(7日)
PubMed APIの使い方を、諸先輩方の資料を参考に勉強。本業が忙しかったり、モチベーションが下がったりで、なかなか進まない。一ヶ月かかっているが、実質の作業日数は7日程度。
・参考にしたWebサイト
Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers
https://developers.google.com/speed/libraries/devguide?hl=ja
jQuertyのCDN
Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」
http://murak.net/gafunc
Google Analyticsでゴール(イベント)設定が格段にラクになる。
(20140914追記) Google Analyticsのユニバーサル アナリティクスでは、GA Functionsは無効だった。。
Frogmouth/jQuery.Wishlist
https://github.com/Frogmouth/jQuery.Wishlist
今回は使っていないけど、wishlist機能の実装には便利。ただ、個別にlist削除がうまくできなかった。
(20150906追記) 現在はTrackWindというWebサービスを使っています。簡単なのでオススメ。
http://www.trackwind.com/
Getting started · Bootstrap
http://getbootstrap.com/getting-started/
BootstrapのCDN
cdnjs.com - the missing cdn for javascript and css
http://cdnjs.com/libraries/bootswatch
BootswatchのCDN
Font Awesome Icons
http://fortawesome.github.io/Font-Awesome/get-started/
Font AwesomeのCDN
iPhoneでフォームへのフォーカス時に自動ズームしてしまう現象について | BALLOG
http://blog.bluearrowslab.com/smartphone/topicks/190/
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi Engineers' Blog
http://alpha.mixi.co.jp/entry/2012/10807/
自動フォーカスも面倒くさかったけど実装
UIプログラミング(10日)
細かいUIいじった。jQueryはPluginが豊富ということで結構試したが、自分の環境ではうまく動かなかったりで結局自力で書いた部分が多い。作っては壊してを繰り返しているうちに時間だけが過ぎる…。これは3ヶ月かかったが、実際の作業日数は10日分程度。仕様も縛らず、走りながら考えているので、まあこんなものかなと。
・参考にしたWebサイト
jQuery case insensitive contains selector - 1.8.1 - Stack Overflow
http://stackoverflow.com/questions/12404653/jquery-case-insensitive-contains-selector-1-8-1
Refine by Termsで使用。フォーム入力文字において大文字小文字の区別をなくすテクニック。
PNG画像作成: fa-university To PNG - Pixelmaker
https://www.pixelmaker.io/r/font-awesome/university/
Font awesomeのアイコンから、PNG画像を作ってくれる。アイコン色は黒、背景は白、スパンは64pxとした。次のアイコン作成で利用。
Faviconアイコン生成: Free Online Favicon and Apple Icons Generator - iconifier.net
http://iconifier.net/
上記PNG画像から、一発でスマホ用のアイコン(5種類程のサイズ)を作ってくれる。
ローダーアイコン生成: Ajaxload - Ajax loading gif generator
http://ajaxload.info/
おなじみの回転するやつ。
プロトタイピング
まず、妻にアプリを見てもらった。可愛くないと言われた。可愛いが正義なので、即修正。次に友人に見てもらった。主にUI周りの指摘をもらったのでスグに反映。
自問自答してみる。研究者なら、論文を読む前に是非欲しい情報っていうのがあるよなあ。具体的には、引用回数、Impact Factor、Altmetricsデータなど。また、文献を引用する際の補助機能もほしい。これらもすぐ手に入るようにした。
宣伝
せっかくサービス・アプリを作ったので宣伝した。というか、宣伝しないと誰も使ってくれない。というわけで、まずは日頃お世話になっているライター(仲間)さんに紹介。某Tech系サイトに載せてもらう企てだったが、こちらはペンディング(=ボツ)に。。
次に、日本の化学系ブログに自薦のメールを書いた。自分の経歴なども添えて、信頼できるヒトというのをアピールしつつ自薦。結果、とあるサイトで紹介記事を書いてくれることになった。じっくり丁寧にレビューして貰ったので嬉しい。
メディア紹介
2014/08/21 電話番号のように文献を探すーRefPapers - 化学者のつぶやき -Chem-Station-
http://www.chem-station.com/blog/2014/08/refpapers.html
*Chem-Stationは、日本最大の化学ポータルサイト
この紹介記事は月間2位の人気記事になったそうだ。
アクセス解析(簡易)
ニュースに掲載されたので、ユーザーのリアクションを知るためにアクセス解析を実施した。ちなみに、QuicklyticsというiOSアプリで表示しています。有料だけどオススメ。
ニュース掲載時に430 visits。紹介記事は約3,000 visitsなので、記事を読んだ15%程度の方がアプリのHPに来てくれたようだ。その後は、一日50ヒット程度に落ち着いている。Pages/Vists(右真ん中のグラフ)は、3.726だった。画面遷移を考えると、みなさん数字検索を試して論文詳細ページまで到達しているようだ。最近のアクセス元は大学関係がほとんど。
ユーザーのリアクション
twitterやFacebookでユーザーのリアクションを見てみた。紹介記事のおかげで、コンセプトもうまく伝わったようだ。いくつかの研究室のWebサイトからのリンクを確認した。便利サイトとして認められたようで、これは結構うれしい。
・長崎大学 医歯薬学総合研究科 | リンク
・九州大学 | Learning Tools
・Acetaminophen’s diary | 化学情報検索に有用な検索エンジン
・北海道大学 錯体化学研究室 | 化学関連ジャーナル
気づいたこと
自分のアイディアをアプリに落とし込み、ユーザーの反応をみれるのはおもしろい。そんなこんなで、みんなの研究活動がスピードアップできればうれしいですね。
英語圏でもそのまま使えるアプリだし、そっち方面でも宣伝しています。(例えば、外国の研究者と会うときは必ず紹介するなど)
そのほか、気が向いたら追加します。ストックしておいてください。