一手間をかけて、ブログとScrapboxをつなげる

このブログ、「iPhoneと本と数学となんやかんやと – あなたになんやかんやな、なんやかんやを」の記事内には、たいていはいくつかのリンクが貼られています。
単語がリンクになっているもののほぼ全ては、Scrapboxと紐づいているからです(試しにScrapboxのリンクを踏んでみてください)。ぼくのScrapboxでの公開ページ、「book scrapbook」に。

book scrapbook」には、

  • 読んだ本の短い感想
  • 着想メモを読める形にしたもの

たちが書き残されており、それらとブログ中の言葉とを紐づけるという一手間を入れてから、更新ボタンをポチッと押しているからです。
一手間と言っても、ポチポチとiPhoneまたはiPadの画面をタップしていくことで簡単に紐づいていくので、そこまでの手間ではありません。

流れとしては、

  • Bearにてブログの文章を書く
  • Scrapboxの自分の非公開ページに転記する
    • ここで、きになる言葉たちをブラケット「[]」で囲んで、リンク化
  • 内容をまるまる「book scrapbook」にコピーする
  • マークダウンに変換して、プレビュー
    • Textwellを利用
  • HTML記法に変換して、更新
    • ショートカットを利用

工程として書き出すと面倒くさそうに感じますが、マークダウンやHTMLへの変換や、他にコピーする作業は、iOSの「ショートカット」アプリやTextwellのアクションの機能を用いているので、まったく面倒ではありません。文章が完成していれば、20秒もあれば更新までもっていけます。

この手間をかけることで、ブログとメモの集まりであるScrapboxをつなげています。
Scrapbox何のメモを見返す中でできたエントリがあったり、関連書籍が見つかったりするので、ブログからScrapboxに飛んでみるのは、ちょっとした探索になるんじゃないかなぁと思ってのことです。
ブログも「book scrapbook」も、どっちもどんどん充実していけば、よりおもしろくなってくるとおもうので、ぼちぼちと書き進めていこうと思います。

では、お読みいただきありがとうございました。

1つの記事を、じっくり書くか、その都度完成させていくか

毎日更新、となると、時間をかけて記事を書かない分、時間をかけてこそ書ける類のエントリがなかなか書けなくなっちゃう。そのせいで、うーむとならないわけじゃない。
でもやっぱり今は、どんどん更新していきたい。

過去記事を見返すと、十分に時間をかけて、なんども推敲をして、伝えたいことが読んでくれている人たちに伝わりそうか吟味した上で更新しているものが、中にはある。
例えば、数学についての連載。

例えば、読んだ本について書いた記事。

例えば、タスク管理についての連載。

毎日更新を目指すと、おのずと何日もかけて書く記事がなくなってしまい、じっくり書いて読んで書き直して、っていうのをできなくなってしまう。
でも、やっぱり、自分の記事でじっくり書いたものを読み返すと、あぁ、こういうのんをまた書けたらなぁ、と感じてしまう。

一方で、毎日更新することをやめて、日々少しずつブログ書く時間をとって書き進めてってやっていると、いつまでたっても更新できない問題が出てきてしまう。
毎日書くのと、毎日更新するのとでは、まったくちがってくる。
毎日書くだけなら、少しでも書き進めることができればそれでよし、となる。完成まで持っていく必要がないために、日々ちょろっとずつ書くことになってしまう。で、ちょろっとでも書き進めれたら、今日も「なんとか書けたし、よしよし」となり、どうしても自分に甘くなってしまう。ぼくは。
一方で、毎日更新するとなると、完成させなければいけない。ちょろっと書いて進んだしまぁいいか、とはできない。だって、完成してないんだもの。更新できてないんだもの。
なので、同じ時間を費やしたとしても、その中身はけっこう違ってくると思う。

で、今のぼくは、以前書いたように、毎日書きたい。毎日更新していきたい。毎日完成させてしまいたい。
それが、今のぼくには必要なんじゃないかな、と思うから。

おわりに

十分に時間をかけて書く。で、なかなか完成しない。
時間はかけきれてないけど、とにかく日々完成させていく。
どちらがいいとは言えない。おそらくは、バランスをとっていくのが一番いいと思う。
けれども、今までなっかなか更新できなかった自分には、とにかく日々完成させていく気持ちでどんどん書くことが、自分の中の何かを変えていくことに繋がるんではないか、と思っているところ。

では、お読みいただきありがとうございました。

じっくり書くのもいいし、サクッと更新するのもいい。ただ、今は、毎日書きたい気持ちなだけで。

ブログを書き始めてから、いい循環が起きている、気がする。

このブログのタイトルは、「iPhoneと本と数学となんやかんやと」。言わば、何を書いちゃってもいい。
いろいろと考えていることを書いてもいいし、やってみていることを書いてもいい。それを読んでもらって何になるのかはわからないけど、考えたことや実践したことで見えることはあると思うので、それを書けば参考になることもあるだろう、と都合良く思っていまはせっせと更新している。
ハードルをわざと下げている。

ただ、そこまでハードルを下げたとしても、ずっと書けていなかった。
沈黙の期間がだいぶあった。
この期間、あんまり書こうとしていなかったってのはあるけれども、今思えば、いろいろと考えたり試してみたりってことができてなかったように思う。

ブログの更新を再開して、あ、やってみたことってブログに書けるやん、と再確認することができた。そういう目線でいると、自分が試しにやってみたことが結構見えて来る。
別にブログのネタになりそうやからやってみるってわけではなく、こういうことも試してみた、あぁいうことも考えてみてる、って気づけるようになったというか。
ネタのストックがあるわけでもなし、記事のストックがあるわけでもなし、その日その日で何書こうと考えていることもあれば、あこれについて書けそうやん!と気づくこともある。
たいていは、ちょっとしたメモから書き始めることが多い。
で、そういうちょっとしたメモは、何かについて考えていたり、何かを試していたりする時に思いつく。
たとえ思いつかなくても、何かしらの理由が合って取り組んだことがあるなら、活動報告的に書ける。

活動全てがブログネタになる。
そう考えると、俄然何かを試したり活動していこうという気も起きやすい。
何か試したら、またそれを文章にしていける。なぜ試したのか、試してどうやったか、いい感じかどうか、なに考えたか。
というように、いい循環が生まれてる。

じっくり考え、書き、1つの記事を作り上げるのもいい。
サクッと軽めな記事でも、書いて更新するのもいい。
別に、どんなんがいいとか、ベストとかない。
自由に書けば、振る舞えばいい。
今はただ、毎日書きたいと思ってるだけで。
その気持ちが続く限りは、どんどん書いていくことを目標に、日々コツコツ更新していきたいな、と思う。
あれこれ試して、考えて。

では、お読みいただきありがとうございました。

紙の本を買うことと、ブログを書いて残すこととの共通点

電子書籍を買うことがかなり多くなってきていて、50%にまで増えてきました。
でも、電子書籍で読んでよかった本は、紙でも書い直すようにしています。

最近、せっせとブログを更新しています。
いくつかのきっかけが重なり、積極的に更新していこうと決意したのですが、理由の1つが「書いて残しておきたい」というもの。
自分が考えたことやいいと思ったこと、伝えたいなと感じたことを書き残しておくことで、いつか読まれる時がくるかもしれない。書かなければ読まれることは絶対ないので、じゃあ書くしかないな、と思ったから。


子どもの可能性の邪魔だけはしたくない。
我が子をみていると、そういう思いを強く抱きます。

人間は生きているなかで、意識的にも無意識的にも、たくさんのことを経験し、吸収していきます。
たくさんの、ほんとうにたくさんの経験の蓄積が、今の自分を作っていると思うのです。
いくら柔軟に生きていたいと願っても、たくさんの吸収によって、いくぶんか塗り固めらる感は否めません。

まだ生まれて数年の子どもを見ていると、塗り固まった部分が、まだまだほんとにちょびっとしかない。
固まっていないぶん、なんにでもなれそうな気がするんです。

そんな子どもに対し、何ができるのか。何もしないほうがいいのではないか、とさえ思えてしまう。
けど、少なくとも今まで生きてきたなかで自分がいいと思ったことや、大切にしていること、素晴らしいなぁと感激したことは、押し付けがましくならない程度に、子どもがすぐに触れられるところには置いておきたい。
書き残しておきたい。

だから本は、電子書籍で読んだものも紙で買い直して棚にたてておこうと思いました。
読むかどうかはわかりませんし、こちらから読んでねと言うつもりもありませんが、興味を持ったらすぐ手を伸ばしてもらえるように。
本を読んできて、すごくよかったなという思いしかないから。

だからブログを書いて、いろいろと書き残しておこうと思いました。
読むかどうかはわかりませんし、こちらから読んでねと言うつもりもありませんが、もしかしたら読んでくれるかもしれないから。そこからなにか考えたり感じたり、学んだりしてくれるかもしれないから。
なにより、ブログを書いてからきて、すごくよかったなという思いしかないから。


できれば数学についてもいろいろと書き残して、押し付けがましくない程度に伝えられることを伝えていきたいな、と思っています。
ただ、子どもが足し算なんかをしていると、ついつい身を乗り出してしまうのですが。

では、お読みいただきありがとうございました。

更新作業を楽にすることが、ブログ更新のキモなのかも

最近せっせと更新しているブログ、ほとんどがiPhoneで一気に書いています。書く内容を選び、そっからダァーっとフリック入力。
その際、使っているアプリが、Textwell
iPhoneでメモや文章を書くときは必ず使っていて、このアプリを起点とすることで何かしら思いついたときに迷わずサッとメモすることができるようにしています。
しかも、書いたテキストを加工するのにも秀でた能力を発揮してくれるので、望みの形式に変換することもできるのが素晴らしい。
さらにはその加工したテキストをショートカットアプリにも受け渡せるので、けっこうなんでもできてしまう。

実際、文章を書いてそれを加工してwordpressに投稿する、という流れを作ることができて、以前よりもだいーぶ簡単にブログが更新できるようになりました。
で、それが、このところの毎日更新を強力に後押ししてくれています。

いちいち手間取ることをしたくはないんです。書いて、ブログを投稿する、というのをできるだけ簡略化することで、更新に対するハードルは確実にさがってくれます。
ブログの文章をかくのはそんなに苦ではなく、まずまず楽しめる。でも、書いてから更新するまでにすごく手間がかかってしまうと、書いてからの面倒くささが頭をよぎり、書かなくなってしまう。
すごく楽に手間なくブログを更新できるようになって、ボトルネックは「書くこと」ではなく、「書いたものを投稿すること」だったことに気がつくことができました。

おわりに

  • Textwellでmarkdownを利用し、文章を書く
    • HTML形式に変換する
    • wordpressに投稿するショートカットを起動し、カテゴリやタグを選ぶ
    • 更新!

実際はもう少し手間を加えていますが、大まかな流れはこんな感じ。
文章を書くことができれば、あとはポチポチと画面をタップしていくだけで更新までこぎつけることができます。
ブログは、書けないから更新できないのではなく、書いてからが手間だから更新できなかった。
手間だったところが省けたので、これからもどんどん書いて更新していきたいと思います。

では、お読みいただきありがとうございました。

これからは、積極的にブログを書くつもりでいます。ブログには感謝感謝です。

3日前から、ブログの更新を再開している。
1つ1つのエントリは、短い。サクッと書いて、えいやっと投稿してるので、こんなんでいいのかなぁ?という気持ちが、ないわけじゃない。
でも、書かないよりも書いた方がいいやろうってのを盾に、サクッと書いている。
毎日なにかしら書くことはある。考えてることとか、本読んで感じたこととか、誰かと話してて気づいたこととか、なんとか、かんとか。
そういうのんを、今までは全然書いてこなかった。
ちゃんとまとまってから書こうと思うあまり、ブログを更新できてなかった。
更新できてないと、ブログを書くための時間をとることも疎かになり、よけい更新できず、、、だった。

書くことで下がるハードル

ちょっと毎日更新をしていきたいな、と考え、試しにえいやっと、サクッと書いたものを投稿してみた。
一度更新するだけで、更新に対するハードルはかんなり下がり、結果、今のところ毎日更新できてる。まだ4日やけど。
でも、更新へのハードルを下げることができたのは、だいぶでかい、と思う。そう思いたい。
毎日更新するなんて、ブログを始めて書き慣れてきたころ以来やけれども、ちょっとまた続けていきたいと思う。
日頃考えてることについてや、読んでいる本から感じたことや、他の人の話から思ったことなんかを。
些細なことでもいい。
時間がない時もあるやろうけれども、そんなときでもその日書けることを書いていきたい。

書く、と決意すること

些細なことでもいいってルールにすると、書けることは驚くほど増える。
本については、読み終えてから書く必要はない。その日読んだ部分について書いてもいい。
考えがまとまってなくても、ブログに書きながら考えてもいい。結論が出なくてもいい。
感じたこと、思ったこと、考えたことを、そっくりそのまま提出してしまったっていい。
思考っていうのは、 勝手に広がっていっている。
「なにか書くことあれば書こう」では、その広がる思考から書く内容をうまく捕まえられない。
「なにか書く!」と決め、書くことを決定事項としておけば、あれについても書ける、これについても書ける、というように、思考から書く内容を紡いでいける。
ここ数日、そんなふうに感じた。

おわりに

ブログを書き始めて、気づけばたぶんもう10年ほど経つ。
学生から社会人になり、家庭を持ち、子どもができた。
その中で、ブログを書く目的は変わっていった。環境も目的も変わる中で、ブログを続ける意志は常に持ち続けている。そこだけは、変わっていない。こんなに長く続けることができていて、自分に大きな影響を与えてくれたものって、なかなかない。
ブログを書き始めたきっかけは、もうあまりちゃんとは覚えていない。けどはっきり覚えているのは、先にブログを書いていた人たちがいた、ということ。ぼくはそれを毎日楽しみにして読み、いつしか自分も書きたいと思い、書くという一歩を踏み出すことができた、ということ。
そんなブログに、感謝感謝しかない。そんな魅力的なブログを書かれた方たちに、感謝感謝しかない。
ほんとに、ありがとうございます。これからも、楽しみにしています。

では、お読みいただきありがとうございました。

「Porter」が切り開く、iPhoneにてScrapboxでの「ブログ書き書き」

最近、iPhoneでブログを書くことが多い。というのも、

  • Scrapboxで記事を書き始めた
  • 画像の挿入などは、iPhone便利
  • Porter」が使いやすく、iPhoneからもScrapboxが快適に使える
    Porter for Scrapbox
    カテゴリ: 仕事効率化, ユーティリティ

あたりが重なってのこと。

iPhoneのみでアウトプットのフローはつくれるか?とか考えたりしてた。これを考えてたときは、Porterを使っておらず、iPhoneからはScrapboxは使いづらかった。その使いづらさをPorterが克服してくれたので、着想をとらえ、まとめ、整理して文章化する、一連の流れがけっこうiPhoneだけでできるようになってたりする。
テキストの受け渡しにも難があった。けど、これはScrapboxでブログを書き始めたことと、Cartaを使い始めたことによって受け渡し自体が必要なくなっている。


以前は、WorkFlowyもしくは名刺サイズの情報カードにメモを集め、Scrapboxに束ね、それをみてブログを書く、という流れだった。
それが今は、TextwellのCartaにメモを集め、Scrapboxに束ね、Scrapboxの他のノートを参照しながらPorterにてブログを書いている。
Scrapboxで文章を書くと、リンクがつながり、他のノートが勝手に下に表示されていくので、参照しやすい。
となると、すべてがiPhoneで済むことになる。
PCで、脇にScrapboxを表示させながらBearで書いていくのはそれはそれでいいけども、iPhoneだけでも十分に書いていける感触がある。
メモは、TextwellのCartaを入り口にして束ね、Scrapboxへまとめていき、Scrapboxで記事自体を書いてしまうので、メモの受け渡しはすごく簡単。


以前はそこまでiPhoneからScrapboxを使うことはなかった。というのも、ScrapboxはiPhoneはちょっと使いづらい部分が多かったから。それを快適にしてくれたのが、「Porter」。iPhoneでブログを書ききるまでできるようになったのは、「Porter」による部分がすごく大きい。

  • スライドカーソル
  • 拡張キーボードにより、コピー・カットやペーストが簡単に
    • リンクや引用文もサクッと
    • 文字の大きさもすぐに変えられる
  • 簡単に画像を挿入できる
  • Scrapbox記法からMarkdown記法への書き換えるアクションを作成可能

あたりが挙げられる。
無料のアプリなので、iPhoneからScrapboxを使いたい人は、ぜひぜひ。


Cartaで着想メモをとらえ、まとめて、Scrapboxに保管し、それらを参照しながらブログを書く。この一連の流れをiPhoneのみでできるようになったことが、「書く」という活動に与えた影響は大きい。おかげで、以前よりも少し、ブログが更新しやすくなった。

PCに比べるとなにかと制約のあるiPhoneやけど、うまいこと使いながら、書くことにも活用していきたい。

では、お読みいただきありがとうごいました。

大阪弁と標準語とメモとブログと

キーボードで書くのとiPhoneのフリック入力で書くの。
話すときの言葉と、書くときの言葉。
口に出してしゃべるのと、声には出さず書くの。

同じ内容を考えてたとしても、考えるスピードや書くスピードは違ってくるように思う。
なので今回、話すときの言葉、つまり、大阪弁でエントリを書いてみようと思い立った。そのほうが早くブログを書ききることができるかな、なんて考えて。
それが、以下の二つ。

普段、何かしら考えごとをするときは「大阪弁」。内容があんまり見えず、思いついたことをだぁーっと書き出すときも大阪弁。つまり、考えるときは話すときの言葉を使う。
それら大阪弁で書かれているメモを見返し、内容を定め、ほかの人が読める形に「仕上げる」ときは標準語。文章を書くぞ、というときは、標準語を意識する。大阪弁ではない。
上記の二つのエントリは、話すときの言葉で書いた。考えたことをだぁーっと書いていくときの言葉で。
じゃあ、二つのエントリは、だぁーっと書き出してそのままブログになったのかというと、やっぱり違う。いつも通り、書き出す段階とブログの形に仕上げる段階に分けて書いてた。


ブログという形で人の前に提出する文章は、ほぼほぼ2回書いている。
まず、あれこれ書き出す。頭の中のモヤモヤがなくなるまで。
「これについて書けそう」と思ってても、ぼくの場合、スラスラと文章が出てくる、なんてことはない。書けそうな気はするけど、モヤモヤしてる、という感じ。まだ頭の中で固まっていない、見えてきていない感じ。
それは、あれこれ書き出すうちにちょっとずつクリアになっていく。
で、だいぶクリアになってきたら、これまで書いた文章を横に表示し、参照しながら書く。つまり、2回書いてるということ。
なんではじめから書き直すことをするのか。そのほうがいいと思うのか。
メモは大阪弁で、ブログは標準語だからだと思ってた。書き出すときは大阪弁で、仕上げるときは標準語だからだと思ってた。
フェーズが、大阪弁と標準語によって分かれているから、仕上げるときには、はじめから書き直したほうが手っ取り早いからだ、と。

大阪弁を敬体に直そうと思うと、なかなかに修正は大掛かりになる。かつ、仕上げに向かうためには、今まで書いた文章を整えていく必要があり、さらに修正は大掛かりに。というか、修正っていうレベルではなくなってくる。
だぁーっと頭の中を書き出していくことでクリアになり、文章の内容、流れはもうほぼ出来上がっているので、大きく構造をいじる必要はない。書き直していって、結果的に大きく構成を変えるときはあるものの、基本的にはできあがってる流れに沿って書き直していけばいい。
ってことで、これまで書いた文章を参照しながら、一から書き直し、仕上げる方法がしっくりくる。そう思ってた。
でも、今回大阪弁で書いてみて、いや、そうでもないなと感じた。大阪弁で書いたらからといって、2回書く必要はなくなるわけではない。早くブログを書ききることができるわけではない。
まぁそうやろうなと、うすうすは気づいてたけど。


大阪弁のブログエントリを書こうと思い、最終的な仕上がりを標準語ではなく大阪弁にしようと思いながら書いていたのに、やっぱり2回書いた。大阪弁を、また大阪弁で書き直していった。結局は、大阪弁や標準語やという区別によらず、「書き出すフェーズ」と「仕上げるフェーズ」に分かれていたほうが、ぼくは書きやすいということ。
でも、いつもと違う感覚もあった。
内容が定まって、ブログ用に仕上げていく段階、いつもは標準語で書こうと思いながら進めるけど、今回は大阪弁で書いた。明らかに、いつもよりも筆の進み具合がよかった。さらさらーっとかけていけた感じ。
大阪弁のほうが、やっぱり書きやすい。文章が比較的すらすらと出てくる感じ。言い換えないで、いつも使ってる言葉、素のままの文章。そのほうが、書きやすい。


メモをできるだけそのままブログに仕上げられんものか、そうできたほうが、ブログを書くスピードは速くなり、更新頻度が上がるのではないか、そんなことを考えてるときもあった。
でも、今回大阪弁でエントリを仕上げてみて、そうは問屋が卸さないことがよくわかった。
たとえ、敬体になおさず、標準語になおさず、大阪弁を大阪弁のままブログの一つのエントリを仕上げようと思っても、もう一度書き直す必要があった。
やっぱり、ブログの一つの記事として仕上げるための、文章を整える作業というか、言葉遣いを修正する作業とかは必要。
ちまちま修正するよりも、一から書いたほうが手っ取り早い。今回も、いつもと同じように手っ取り早かった。
メモとかを集めて、全体の流れを整えて、文章を仕上げていくためには、もうこれは必要なことと割り切っていくのがいい。


一発で文章を仕上げようとは考えない。
けっこうそれが、文章を書く上では大事じゃないかな、と思う。
まずは。
次の文章を頭から出そうとうんうん悩まず、思いついたことをそのまま書いていく。だぁーっと書いていく。書いたことを読み返すと、また何か思いつく。思いついたことをまた書いていく。それを繰り返していくと、はっきりしてくる。頭の中ではおぼろげにしかみえてなかったことが、クリアになっていく。
書き出すのは、クリアになるまで続ければいい。なかなか仕上がらなくても、気にせず。見えてくるまで書いては読み返し、書き足しを繰り返す。
そしてクリアになってから、これまで書いたことを見返しながら文章に仕上げていく。
実はこのブログエントリは、仕上がるまで半年以上かかってたりする。一番はじめのメモを書いてから、半年以上。
そっから折に触れて書いては読み返しを繰り返すことで、だんだんとクリアになってきて、書く内容が見えてきて、ようやく一つのエントリに仕上げることができた。そういう書き方も、あったりする。そういう書き方も、いいですよね。

では、お読みいただきありがとうございました。

余談

2度書くことについては、「書いてから、書く。」と題して、こちらでも書いております。

自分も習慣化に取り組みながら、「習慣化」についての連載を書くと、すごくいい

4月から「アシタノレシピ」の執筆陣に加えていただいています。
ほんとうに光栄なことで、ベックさんから声がかかったときは、「是非是非!」と参加を即決しました。というのも、アシタノレシピのいつかの記事で「書いてくれる人誰かおらんかなぁ」的なことを書いてて、立候補しようかなと思いつつ時が過ぎていってしまってたからです。なので、声をかけてもらえたのはほんまにうれしく、今も楽しみながらとりくむことができています。
というのは余談で。
現在、アシタノレシピでは「「習慣化」のための自己サポート集」と題した連載をしています。「習慣化」をテーマに記事を書いてるわけです。
連載の中でも書いているのですが、習慣化について書きはじめたくらいの頃から、「Mediumで日記を書く」ってのを新たにはじめました。習慣化について連載しながら、同時に自分自身も新たなことの習慣化にとりくみはじめたんです。で、これがすごくいいなと感じるんです。

「習慣化」について書きながら、自分も「習慣化」にとりくむ。
「習慣化」にとりくむことによって、それが連載を書く際の具体例となります。具体例があったほうが話は展開しやすいもの。自分が習慣化にとりくんでいる「Medium日記」について触れながら、習慣化についてより具体的に書くことができてる感じです。
さらには、書くことによって気づくこともたくさんある。連載で書くことで自分自身の理解も進み、新な気づきが起こり、習慣化にもプラスに働く。そういう良循環が起きている感じがします。
記事がすごく書きやすいんですよね。習慣化に取り組みながら、習慣化について書くってのは。

考えていることとやっていること、考えたこととやったこととが、書いてあるブログ

思えばこれは当たり前のことで、これってぼく自身すごく慣れ親しんでいる方法であることに気づきました。
ぼくのブログを書く際の基本的なスタンスが、考えたことを試してみて、試してみたことを書いてみる、というものだから。
ぼくの最も好きなブログは、「23-seconds blog」なのですが(ほんとうにおもしろいのでみなさんぜひ読んでみてください)、そのブログ内のあるエントリで、ぼくのブログをこんな風に表現してくれていたことがありました。
「考えることと、やってみることで満ちているブログです。」
このように表現してもらえて、ほんとうにうれしいですし、まさにこのブログを言い表してくれている言葉だと思います。
ぼくが考えていることとやっていること、考えたこととやったことを書くのは、それがやっぱり楽しいっていうのと、そうやって書いていくことでまたさらに考えてやってみて、、、が続いていくから、なのだと思います。
考えたことを試してみて、試したことを書いてみる。と、はじめに考えてたのんとはまた違った気づきが得られ、それを試してみてることに反映し、反映してみながらまた書く。また新たな気づきが得られて、、、の繰り返しがおこったりする。
それがすごく楽しくて。
「考えること、試すこと」と「書くこと」は互いにいい影響を及ぼしあってくれる。からぼくは、ブログを、考えていることとやっていること、考えたこととやったこととを、書く場にしているのだと思います。

おわりに

Atsushi – Medium
ぼくのMediumのアカウントです。自分で「Medium日記」と呼んでいる、1日の活動を振り返る日記は、毎日22時半くらいに更新されるか、と思います。とりとめのないことばかりを書いてるので、自分のために書いている、って部分が強いのですが。
Mediumでは他には、自分のブログの記事も載せたりしています。特に、はてなダイアリーで書いてたときのエントリを読み返し、「知的生産」に関する話をときどきMediumに再掲したりしてます。そんな感じで、Mediumで遊び始めているところです。なんとなしにのぞいていただければ、と思います。

では、お読みいただきありがとうございました。

「タグでシンタックスハイライト」を実装して、執筆専用ブラウザを文章エディタに

WorkFlowyでシンタックスハイライトを実現させるために、いろいろと調べました。
もっとぼくにプログラミングの知識があれば、ほんまもんのシンタックスハイライトを実装できたのかもしれませんが、そこまではわからずで。
最終的に、「タグ」によってハイライトする方法で、文章の見出しやリストの文字色を変えることにしました。
例えば、見出しのh2にしたいところには、「#h2」というタグをつける。すると、そのトピックの文字色が変化する、というような感じです。
マークダウンであれば「##」をつけてh2の見出しにするところを、「#h2」というタグをつけることで見出しにするわけです。
特定のタグに対して、そのトピックのスタイルを自由に定めることができるって機能なので、ただ単に文字の色を変えるだけでもいいですし、スタイルをがらっと変えてしまったりもできます。

HandyFlowyとFireFoxでの実装

「特定のタグをつけたトピックの文字を装飾する」機能は、こちらの記事を参考にさせてもらいまくりました。
#HandyFlowy タグでトピックのスタイルを変える – #WorkFlowy 関連のメモ ( #sorashima )

HandyFlowyバージョン

まず、HandyFlowy用のスクリプトはこんな感じ。

// ==UserScript==
// @name                     WorkflowyStylableTags
// @description        Gives each tag it's own css style, so you can style them with Stylish. I use Blank Canvas to manage my userscripts in Chrome.
// @author                 Nigel Thorne and LukeMT
// @include                http*://*workflowy.com/*
// @version                1.1
// ==/UserScript==



/*タグ装飾を可能にする*/
String.prototype.endsWith = function(suffix) {
suffix.length) !== -1;
};

var customClasses = function(index, old){
        var classes = old.split(" ");
        var custom = [];
        for( i = 0; i < classes.length; i++){
                if(classes[i].endsWith("-proj")){ custom.push(classes[i]);};
        };
        return custom.join(" ");
}

var StylableTagsCounter = 1;
setInterval(function(){
        StylableTagsCounter ++;
        if( StylableTagsCounter >= 3){
                $('.project').removeClass(customClasses);
                $('.pageContainer').removeClass(customClasses);
                StylableTagsCounter = 0;
        }
        $('span > .contentTagText').map( function(){
                var x = $(this).text();
                $(this).parent('.contentTag').parent().parent().parent().addClass(x+"-proj");}
        );
},1000);


/*装飾可能にするタグを指定し、どんな装飾をほどこすのかを定める。着脱式になってます。*/
\";position: absolute;left: 0px;width: 40px;color:#31B404;height: 0;line-height: 1.0;padding-top:1.5px;font-size:16px;}.contentTag[title=\"Filter #l\"]{font-size:10px;font-weight:100;background-color:white;color:white;}.contentTag[title=\"Filter @l\"]{font-size:10px;font-weight:100;background-color:white;color:white;}.project.o-proj>.name>.content {color: #AEB404;}.project.o-proj>.name>.content :before{content: \"1. \";position: absolute;left: 0px;width: 40px;color:#AEB404;height: 0;line-height: 1.0;padding-top:3px;font-size:16px;}.contentTag[title=\"Filter #o\"]{font-size:10px;font-weight:100;background-color:white;color:white;}.contentTag[title=\"Filter @o\"]{font-size:10px;font-weight:100;background-color:white;color:white;}.project.b-proj>.name>.content {color: #A4A4A4;}.project.b-proj>.name>.content :before{content: \"> \";position: absolute;left: 0px;width: 40px;color:#A4A4A4;height: 0;line-height: 1.0;padding-top:1.5px;font-size:16px;}.contentTag[title=\"Filter #b\"]{font-size:10px;font-weight:100;background-color:white;color:white;}.contentTag[title=\"Filter @b\"]{font-size:10px;font-weight:100;background-color:white;color:white;}";document.body.appendChild(e);}"

このスクリプトは、大きく分けて二段階になっています。
前半部分が、「タグ装飾を可能にする」ためのもの。後半部分が、「装飾可能にするタグを指定し、どんな装飾をほどこすのかを定める」ためのもの。
後半部分をいじってもらえれば、自分の好きなスタイルを作ることが可能です。
例えば、「#h2」タグをつけたトピックの装飾を決めているのが、コード内の以下の部分。
.project.h2-proj>.name>.content {color: blue;font-weight: bold;font-size: 20px;padding-left:0px;}
これは、
.project.タグ名-proj>.name>.content {どんな装飾をほどこすか}
という形式になっています。
つまり、「「#h2」タグがついているトピックの文字の色を青にし(color: blue;)、文字を太くし(font-weight: bold;)、文字の大きさを20pxにし(font-size: 20px;)、左の余白を0にする(padding-left:0px;)」という指示になります。
ってな感じで、「見出し」「リスト」「番号付きリスト」「引用」のためのタグを設定しています。
以下のような指示のコードを書いています。

  • 各種見出し
    • 「#h2」「#h3」「#h4」をつければ青色に装飾&文頭に「##」をつける&タグの色を白にして見えないように
  • リスト
    • 「#l」をつければ緑色に装飾&文頭に「- 」をつける&タグの色を白にして見えないように
  • 番号付き見出し
    • 「#o」をつければ緑色に装飾&文頭に「1. 」をつける&タグの色を白にして見えないように
  • 引用
    • 「#b」をつければ灰色に装飾&文頭に「> 」をつける&タグの色を白にして見えないように

その結果、こんな見かけになります。

推敲するときはブログの表示に似せたスタイルを適用します。上記拡張スクリプトとは別途、作成しました。スタイルを切り替えて適用するだけで、見かけはこんな風に変わります。

スタイル切り替えるだけでいける、ってところがうれしい。

FireFoxバージョン

PCでは、少し手間がかかります。
FireFoxのアドオンとして、「Stylish」に加えて「Tampermonkey • Firefox」というのをインストールする必要があるからです。
どちらも、拡張機能から入手可能です。
TemperMonkeyが「タグ装飾を可能に」してくれて、Stylishによって「装飾可能にするタグを指定し、どんな装飾をほどこすのかを定める」わけなのです。

TemperMonkeyをインストールしてもらって、「新規スクリプトを追加」を選び、以下のコードをコピペしていただければオッケーです。ただ、あくまでも自己責任でお願いします。

// ==UserScript==
// @name                     WorkflowyStylableTags2
// @description        Gives each tag it's own css style, so you can style them with Stylish. I use Blank Canvas to manage my userscripts in Chrome.
// @author                 Nigel Thorne and LukeMT
// @include                http*://*workflowy.com/*
// @version                1.1
// ==/UserScript==



String.prototype.endsWith = function(suffix) {
suffix.length) !== -1;
};

var customClasses = function(index, old){
        var classes = old.split(" ");
        var custom = [];
        for( i = 0; i < classes.length; i++){
                if(classes[i].endsWith("-proj")){ custom.push(classes[i]);}
        }
        return custom.join(" ");
};

var StylableTagsCounter = 1;
setInterval(function(){
        StylableTagsCounter ++;
        if( StylableTagsCounter >= 3){
                $('.project').removeClass(customClasses);
                $('.pageContainer').removeClass(customClasses);
                StylableTagsCounter = 0;
        }
        $('span > .contentTagText').map( function(){
                var x = $(this).text();
                $(this).parent('.contentTag').parent().parent().parent().addClass(x+"-proj");}
        );
},1000);

で、Stylishにて、タグを指定してそのトピックのスタイルを書き換えます。書き換えのコードは、HandyFlowyのときに説明したようにすると、自分の好きなように装飾することができます。
少し長くなりますが、全容を載せます。

/*h1の見出しのスタイルを調整*/
.project.h1-proj>.name>.content {
        color: black;
        font-weight: bold;
        font-size: 23px;
        /*padding-left:20px;*/
}

/*h1タグのスタイル*/
.contentTag[title="Filter #h1"]{
        font-size:10px;
        font-weight:100;
        background-color:#BDBDBD;
        color:white;
}
.contentTag[title="Filter @h1"]{
        font-size:10px;
        font-weight:100;
        background-color:#BDBDBD;
        color:white;
}


/*h2の見出しのスタイルを調整*/
.project.h2-proj>.name>.content {
        color: blue;
        //font-weight: bold;
        //font-size: 20px;
        padding-left:0px;
}
.project.h2-proj>.name>.content :before{
        content: "##";
        position: absolute;
        left: 0px;
        width: 40px;
        height: 0;
        font-size: 16px;
        //font-weight:bold;
        line-height: 1.0;
        color: blue;
        padding-top:2px;

}

/*h2タグのスタイル*/
.contentTag[title="Filter #h2"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @h2"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}

/*h3の見出しのスタイルを調整*/
.project.h3-proj>.name>.content {
        color: royalblue;
        //font-weight: bold;
        font-size: 16px;
        //padding-left:10px;
}
.project.h3-proj>.name>.content :before{
        content: "###";
        position: absolute;
        left: 0px;
        width: 40px;
        height: 0;
        font-size: 16px;
        line-height: 1.0;
        color: royalblue;
        padding-top:2px;
        //font-weight:bold;
}
/*h3のタグのスタイルを調整*/
.contentTag[title="Filter #h3"]{
        font-size:16px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @h3"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
/*h4の見出しのスタイルを調整*/
.project.h4-proj>.name>.content {
        //font-weight: bold;
        color: cornflowerblue;
        //padding-left:38px;
}
.project.h4-proj>.name>.content :before{
        content: "####";
        position: absolute;
        left: 0px;
        width: 40px;
        color:cornflowerblue;
        height: 0;
        line-height: 1.0;
        padding-top:2px;
        font-size:16px;
        //font-weight:bold;
        padding-top:2px;
}
/*h4のタグのスタイルを調整*/
.contentTag[title="Filter #h4"]{
        font-size:20px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @h4"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}

/*リストの見出しのスタイルを調整*/
.project.l-proj>.name>.content {
        color: #31B404;
        //padding-left:13px;
}
.project.l-proj>.name>.content :before{
";
        position: absolute;
        left: 0px;
        width: 40px;
        color:#31B404;
        height: 0;
        line-height: 1.0;
        padding-top:1.5px;
        font-size:16px;
}
.contentTag[title="Filter #l"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @l"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}

/*リスト(番号)のスタイルを調整*/
.project.o-proj>.name>.content {
        color: #AEB404;
        //padding-left:13px;
}
.project.o-proj>.name>.content :before{
        content: "1. ";
        position: absolute;
        left: 0px;
        width: 40px;
        color:#AEB404;
        height: 0;
        line-height: 1.0;
        padding-top:3px;
        font-size:16px;
}
.contentTag[title="Filter #o"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @o"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}

/*引用のスタイルを調整*/
.project.b-proj>.name>.content {
        color: #A4A4A4;
        //padding-left:13px;
}
.project.b-proj>.name>.content :before{
        content: "> ";
        position: absolute;
        left: 0px;
        width: 40px;
        color:#A4A4A4;
        height: 0;
        line-height: 1.0;
        padding-top:1.5px;
        font-size:16px;
}
.contentTag[title="Filter #b"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.contentTag[title="Filter @b"]{
        font-size:10px;
        font-weight:100;
        //background-color:#BDBDBD;
        background-color:white;
        color:white;
}
.bullet{background-image:none;}

.bullet{background-image:none;}
    .project.open>.name>.bullet{border:1px silver solid;border-radius:3px;}
    .bullet,#bulletBucket .bulletBucketBullet{background:silver;border-radius:3px;}

これで、書くとき用のシンプルなシンタックスハイライトが実装されます。

タグのルールは上記HandyFlowyと一緒です。
で、自分用には推敲用のブログの見かけと同一になる装飾のスタイルも作成しちゃいました。

FireFoxでも、両方を切り替えながら書くことができ、とても、とてもいい感じです。
重ね重ね言いますが、どうか自己責任でお願いします。

このルールで色を変えることができるのは、「タグをつけたトピックを装飾する」という性質上、「見出し」と「リスト」と「番号付きリスト」と「引用」のみ。文章中の一部を「太字」や「イタリック」に装飾し、そこだけ色を変える、なんてことはできません。
また、タグを書く位置は、文頭に。じゃないと表示がうまくいかないようになってます。
文中ならどこでもいいっちゃいいのですが、あとあとのエクスポートのときを考えているのと、マークダウンは基本文頭に記号を書くこと。また、WorkFlowyでは、カーソルを移動させてる時にトピックをまたぐと、カーソルはかならず文頭に行く、ってことから、文頭に書くというルールにしました。

おわりに

公開しているのはシンプルなシンタックスハイライトのほうだけですが、自分用にはPCとHandyFlowyの両方に、執筆用と推敲用の二つのスタイルを作りました。これで、PCでもiPhoneでも書けるし、推敲できるようになったわけです。
一応どっちも用意してるだけで、基本的な流れは、PCにて「執筆用」で書き始め、書き進め、マークダウンタグで見出しとか定め、仕上げに近いところまでもっていきます。
そしてPCかiPhoneのどっちかの「推敲用」で、ブログと同じ見かけに表示させて、読み返し、細かい修正を加える、という感じ。
ブログにアップするためには、WorkFlowyでつけた「#h2」とかのタグを、「##」やら「<h2>」やらに書き換えなければいけないのですが、そのへんをスムーズにいくようにするのが、今後の課題です。

おそらく、技術的な部分では説明不足なエントリとなってしまったかもしれませんが、自分自身コードを書く技術に乏しいので、勘弁してやってください。

では、お読みいただきありがとうございました。