Sashikomi - chromeウェブストア

これはなに？

markdownで書いたメモを直接ページに挿入できるChromeExtensionです。タイトル通りです。

使い方

ストアのScreenshotに載せてあります。

使用上の注意

バックグラウンドページのindexedDBにのみデータが保存されるためchrome上からextensionを削除するとデータはすべて消えます。
chromeのindexedDB容量の上限に達するとデータが消えることがあります。
Twitterのようなどんどん更新されるようなサイトやAutoPatchWorkのようなextensionで読み込まれたページではDOMを追えないので挿入エラーが発生します。
ページのDOMに直接挿入するため、Styleの崩れが発生することがあります。

動機

ライブラリやフレームワークなど、ブログやQiitaなどで得た断片的な情報だけじゃなく、英語でも公式ドキュメントをちゃんと読もうとする気概が自分の中で高まっていて、その補助ツールとしてSashikomiを作りました。

お世話になるライブラリのドキュメントはだいたいが英語で書かれていて、開発中や後で直したいときなど、ドキュメントを読み返す度に英語読解イベントが発生して、結構ストレスに感じていたので、ドキュメントの中に簡単な翻訳を残したいと思っていました。

Kobitoとかにメモを書き溜めていたんだけど、断片的で浅い内容で結局ドキュメント読むことになったり、有用な情報を残そうと思うとまとめるのに結構時間が持っていかれたり、増えてくると管理が大変だったりで、いまいち書いたものを有効活用できていませんでした。

私がお世話になるようなライブラリはだいたいが有名なものでドキュメントもきれいに整理されているので、その中にメモを残せば、情報を外でまとめたり、いちいち探したり、管理する必要がないのではと考えています。

使った主なライブラリとか

React.js

今までVue.jsを触りつつ横目でReact.jsを追っていて、ちょうどいい機会なのでReactを採用しました。

Vue.jsと比較すると、どちらもコンポーネント志向なフレームワークなので考え方はだいたい似ていて、（単純なコンポーネントを作っただけなので、）そこまでReact.jsに対してハマりどころはありませんでした。ディレクティブでDOMを制御するVue.jsよりもReact.js(JSX)のほうが直感的に書けるかなくらいの印象です。

Dexie.js

Dexie.js - Minimalistic IndexedDB Wrapper

indexedDBのラッパーライブラリ。APIを叩くとPromiseを返してくれます。

chrome extensionの場合、chrome storageもあるが、最近読んだパーフェクトJavaScriptでindexedDBを知って気になっていたので使ってみました。

Vue.jsやReact.jsを使うとDOMとデータがきれいに分離できて、データを単純なオブジェクトとして管理できるので、コロコロ変わる状態の管理は厳しいけど、データストアとしてindexedDBあたりのクライアントサイドストレージと相性は悪く無いのではと考えているんだけど、いまいち盛り上がっていない印象。

Feedbackをお待ちしております

書いたコードはここに置いてあります。
cotto89/Sashikomi - github

初めてgithubでコードを他人の目に見える場所に公開してみたんだけど、そもそもgitの使い方や運用方法がわかっていなくて、コミットログもブランチも結構いい加減で、buildしたコードも平気混ざっていたり、テストがなかったりとても残念な状態です。

コードを公開した目的は、Sashikomiは直接DOMに挿入するextensionなためStyleが崩れることがあります。またそもそものstyleがイケてないとかJSの挙動がおかしいとか、もっとこうしたいとかあるかと思うので、公開して自由にいじれるようにしました。

もちろん、バグやstyleのあからさまな崩れにはできるだけ対応したいと思っています。その他、extensionの使い勝手等、TwitterやGithub, extension pageで遠慮無く言って頂けると幸いです。
cotto(@cottto89) | Twitter