リモートワークでも活躍するCosenseの魅力
チームで知識を貯める場所が欲しくなる。情報を整理して、必要なものを引っ張り出したい。その目的にCosenseが非常にマッチしていると思う。そこでCosenseの魅力をまとめたい。 及川卓也氏によるコミュニケーションの「フロー」と「ストック」の話。 https://gyazo.com/7d8ecd55f28ccf9d3cf369cf60bfde45
複数人での同時編集
https://gyazo.com/205e297d86b5b013df68d83a43beeae7
爆速の箇条書き記法
最初にスペースを開けるだけで箇条書きになる。
全角スペースでも半角スペースでもタブ文字でも。
https://gyazo.com/823509f8f143afc56ffc05e4ec1fbe8c
時に箇条書きは長い文章を書くよりも読み手に分かりやすい。思考途中のときにも箇条書きはとても合っていると思う。
最強の見たまま編集
編集画面と投稿という概念がない手軽さ。
ただ大きく違うと思うのは、文字の装飾を書き手がちゃんと把握し制御できる点。
例えば、以下のデモのように斜体や太字やフォントの装飾が文字のどこまでなのかをしっかりと制御できる。
https://gyazo.com/e817cad6fae2dd32f4fcc8a58e055ebe
他の人の面白い書き方を発見したら、カーソルをかざすだけで記法が分かる。
そして自分でのすぐに試せる。
強力なプロジェクト内リンク
プロジェクトでリンクを作るのは非常に簡単。
リンクしたい文字を[ ]で囲むだけ。
以下の例では"Slack"と"セキュリティ"にリンクしている他のページが関連ページに自動で列挙される。
この瞬間が気持ちいい（主観）。
だからページが増えてくるとより気持ちいい（主観）。
https://gyazo.com/96d2980582ef4ecb644276c8d85dd89b
リンク先はページ
[]で囲んだ文字はただのページ。SlackをクリックすればSlackのページにジャンプする。そのページではSlackにリンクする他のページが列挙される。 https://gyazo.com/495e6c0901c02ff243b2bc000c3a419f
つまり、とりあえず用語 を[]で囲めば関連ページのリストは自動で生まれる。
存在しないページでもとりあえず[]で囲めば将来的にどんどん繋がりが生まれる。
繋がりが生まれると気づかなかった新しい発見があったりする。
本文のあるページにリンク、リンクのサジェスト
もちろん、以下のように本文があるページ対してリンクできる。
しかもサジェストがある。tabを使ってサジェストは移動する。 https://gyazo.com/03839dd3b37fbacd570dc5959d8b1757
全ページでリネームが反映される ←「これがすごい」
以下のように、全リンクしているページでリネームできる。
外部から参照されていても改名後にちゃんとリダイレクトされる。
https://gyazo.com/fb108f6d2f93449c19fe5d9dd7ad76d9
だからタイトルは適当に決めれる。
いつでも変更できる。
他のページでリンクされていても追従される。最強！
TIPSとして用語を統一したい時に[]してればIDEで変数をリネームする便利さと安心感が手に入る。 リンクとタグは同じ
タグでスペース開けたければ "_" （アンダーバー）を使う。
リンク・タグの活用例
プロジェクト外のリンク
例: [GitHub https://github.com/]
例: [https://github.com/ GitHub]
順番はどっちでも良い。
code:見てるページをリンクにするブックマークレット
javascript:window.prompt('',[${document.title} ${location.href}]);void(0);
Cosenseをやりはじめると上記と同じコードをみんな独立して作ることになる。 「いま編集しているページどこ？」って聞かなくて済む
チームで書いているときに「どのページ編集してる？」ってなることがある。それもコミュニケーションいらずで解決する。
以下のようにCosenseはデフォルトだとページが最近更新されたもの順（"Date modified"）になる。 そのためトップページに戻って最初のページにジャンプすればOK。
https://gyazo.com/247dad8d4f632e8946a624a64028e2b6
更新された内容だけキャッチアップ
未読が緑で、新しいところほど太い。
https://gyazo.com/b2554b912e2126d241796c3db4fc68a6
トップページで過去に見たタイトルが上に来ていて、スクロールしながら緑を見つける感じで使える。
画像を埋め込む
ドラッグアンドドロップする。
URLが.pngや.jpgや.gifで終わっていれば画像として埋め込まれる。
それで終わっていない画像は#.pngをURLの末尾につけて対処可能。
クリップボードの画像も貼れる。
大きくしたいときは[[https://example.com/myimage.png]]のように[[]]で囲む。
コードを書く
以下のようにcode:jsやcode:main.goのように書く。
https://gyazo.com/258ba921a8ab98a59ee7d9726aa61f7b
code:index.js
console.log("hello, world");
alert("hello, world")
上記のように箇条書きにもコード埋め込める。
言語の隣のアイコンを押せばコピーもできる。
他のプロジェクトのsettingsのstyle.cssをimportするときに便利。
<iframe>の埋め込みは不要。
例：[https://www.youtube.com/watch?v=1NxV6JxtbeE]
https://youtu.be/1NxV6JxtbeE
地図を埋め込む
N35.7170899,E139.7943404,Z16 浅草寺
クリックすれば動かせる。
好きなアイコンを作って埋め込む
ルールは一つ: [ページ名.icon]とするとそのページの最初の画像がアイコンになる。
ページの名前にアイコンの名前つけて、画像を貼って、.iconで埋め込めばOK。
外部のプロジェクトのアイコンも読み込める。[/プロジェクト名/ページ名.icon]
そのため[/icons/Google.icon]でGoogleのアイコンが出る。 例: /icons/Google.icon /icons/Scrapbox.icon /icons/Python.icon /icons/party_parrot.icon
大きくする例: /icons/Google.icon /icons/Scrapbox.icon /icons/Python.icon /icons/party_parrot.icon (文字と同じで[*** ]で囲むだけ)
お絵かき機能
例えば、それを使えば画像内の隠すべきものをマスクすることもできる。
画像は破壊的に変更されないところが良い。
変更前の画像も残っている。
変更前の画像はリンクの文字を消すだけではなく、Gyazoに飛んで削除もすべき。 もちろん、そもそもアップロードすべきものでなければ、アップする前にローカルマスクすべき。
https://gyazo.com/6a07fe9190454ba6303bbf424bdac5e2
お絵かきできるので注目してほしい部分を指したり、
チームを和ませる落書きも描ける。
以下のようにDrawingを選択すると白紙から書くことができる。
https://gyazo.com/3918bfd1c5a596fe44e274657fd042e3
テーブル（表）を作る
table:テーブル名で作れる。次のセルを作るためにはtabを使う。
すごく手軽。
tabを使って区切るのでTSVになっているとも言える。 テーブル名をクリックするとCSVがダウンロードできる。 セル内の文字にリンク使える。
https://gyazo.com/5fc024cd77915b82d6d0d15a539e5ed0
例:
table:商品
品番 商品名 個数
A-1 ピンセット 100
A-2 消しゴム 25
最初はみんな思うこと同じ。
個人的見解としては、高速に脳内を出力する最適な記法を求めるとCosense記法に行き着くと思う。 JSONとして全部エクスポートできる
Settings > Page Data > Export Page
https://gyazo.com/e1b90a5c575de0f7c978cc5bc9cd9860
解析したりできる。
https://gh-card.dev/repos/progfay/scrapbox-parser.svg https://github.com/progfay/scrapbox-parser
定期的にバックアップをとるように設定もできる。
https://gyazo.com/e4a29001aa58dd65e0fd0263801b2c39
大事なので再掲載
これらの機能が全部、複数で同時にリアルタイム編集に編集できる！
https://gyazo.com/205e297d86b5b013df68d83a43beeae7
個人でも十分楽しい。
みんなで書くともっと楽しい。
Cosenseは工夫次第。工夫は楽しい！
Cosenseはシンプルな機能の組み合わせで色々できるように設計されている。 hr.icon
TIPS集
一瞬で日付を挿入
Ctrl + T
デフォルトで「2020/3/4」形式で挿入される。
ページを切り出す
以下のように選択して「New page」を押すと選択部分が切り出せる。
他のページでもリンクしたくなったり、
大きすぎるページの細かくしたり、
分割統治しやすい。
https://gyazo.com/266ed2b2d0615206b1fd17e6aca88e7b
CSSで自分好みのデザインに
「settings」でcode:style.cssと書いているものがカスタマイズしているもの。 自分のプロジェクトに「settings」という名前のページを作りcode:style.cssを書けばできる。
気になるデザインがあれば、他の人のsettingsを見てコピーして挙動を試したりできる。 このプロジェクトでも
タグのデザインや
外部リンクのときのアイコンや
プロジェクトタイトルへの文言や
キーボードアイコン記法など
例えばカスタムの面白い例として、以下はCosenseで吹き出しを出して漫画みたいにしているプロジェクト。 顔は.iconが使われている。
https://gyazo.com/a2dde9f029d49ab1e75d360d3d0c8719
外部リンクにアイコンをつける
以下のようになるやつ。デフォルトでこれになってもいいかな気がしている。
https://gyazo.com/30e6b47f2ad8785d4ffa3d21c63a74db
code:style.css
/* External links */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
プロジェクト内リンクだと読み込みも早いし、外部リンクが明示されると精神衛生上良いと思っている。
<hr>みたいな横棒を出したい
hrというページを作り、以下のページの画像を貼り、[hr.icon]のように書くと良い。
アイコンを応用したテクニック。
一瞬で自分のアイコンを入れる
Ctrl + i
例: [nwtgck.icon]
実際: nwtgck.icon
以下みたいに賛同したり、役割に自分のアイコンつけたり。
https://gyazo.com/01c90b291f4b96bdd3cef48b77926167
「わかるnwtgck.icon*5」みたいにたくさんつけて気持ちをのせることも。
プロジェクト内リンクはそのまま貼り付け、D&Dできる
このプロジェクト（）なら]を貼り付けると自動で[hoge]になってくれる。 これの応用で以下のようにドラッグアンドドロップでリンクが貼れる。これはブラウザの機能としてD&DしたときにURLを貼り付けるからだと考えられる。
https://gyazo.com/d2c43dd6c8ac96cf29806fdfb691212d
オフラインでも閲覧可能
右下が以下の「Offline mode」という表示になりオフラインでも閲覧が可能。
https://gyazo.com/8aba201cec5c54d98f9181b163259785
アプリとしてインストールしたい
PCのChromeでインストールするときは以下のように「Cosenseをインストール」から。 https://gyazo.com/a6f8f1cea4543250193cfc8f6f9492ed
インストールできるとMacだと以下のように通常のアプリケーションと同様にアイコンもできる。 https://gyazo.com/6af53a0ec4cd980ed10891e21c9e5ce9
Androidであれば、以下のような表示出ていればそれを押すとインストールできる。 https://gyazo.com/1147031194d630d2560612e861458dda
アイコンもできる。
以前やった時はない時とある時があったような。
https://gyazo.com/6271327dd2346f749d378f155bd81601
おわりに
まだまだ色々Cosenseの魅力はある。検索機能とか。Service Workerを活用してUIスレッドの邪魔をせず実装されていたりしたはず。Cosenseは未来のWeb/ブラウザの成長を見越して設計になっているような話を見かけた気がするし、技術的にも面白いものが詰まっていると感じている。 公開は完全無料で、個人利用やフリーランス・教育機関・非営利などは非公開でも完全無料で利用可能。
Cosenseを始めてから些細なことも手早く手軽に書き残せるようになってメモした技術を引っ張り出す時にとても役に立っている。リモートワークとの相性が良いと思うCosenseの知名度とその便利さが広まってほしい。