記事一覧
Amazonの書籍タイトル表示研究
出発点
・AmazonページからScrapboxへクリップするブックマークレットを作った
・クリップ時、タイトルに(〜〜新書)などが含まれていることがある
・なんか見た目うっとうしいし、むしろ本文中に組み込んだ方がいいんじゃね？
・タイトルのテキストを正規表現でうにゃうにゃすればできるかも！
調査（カッコ内にどんな情報があるか）
・新書や文庫などのレーベル名
・上下や巻数名などの表記
・ただ
ツールの下準備:htmlファイルを作成する
再確認しておくと、この連載では、HTMLをいじってWebブラウザで使えるツールを作ることを目指します。
よって、サーバーなどを作る必要はありません。簡単に言えば、htmlファイルをローカルに保存しておて、それをブラウザ表示させればOKなのです。
だからまずはhtmlファイルを準備します。
ベースとなるhtmlファイルGoogleで、「html5 テンプレ」とか「html5 サンプル」とかググ
知的生産ツールの三要件
さて、Webブラウザで使える知的生産ツールを作っちゃうぜ、という話なのですが、それらのツールに必要なことってなんでしょうか。三つあります。
1.テキスト入力これはまあ、いうまでもありませんね。メモツールや文章作成ツールなら必須ですし、それ以外のツールでも入力できないなら「知的生産」は結構難しいでしょう。
HTMLの要素なら<textarea>がユーザーの入力を支援してくれます。JavaScri
このマガジンについて
順番が前後しますが、このマガジンについて。
テーマは「ブラウザで動く知的生産ツールを自作するよ」ということで、日曜大工レベルのプログラミング知識しかない倉下が、ネットとコピペを全力で駆使して、自分用の知的生産ツールを作る、という過程と試行錯誤をお送りします。
ノーマルなプログラマさんには分かっている話が多いと思うので、技術系の投稿サイトではなくnoteに連載することにしました。逆に言えば、あま
一行目から自動的にタイトルを設定する
textLineは、情報カードを意識したので、タイトルと本文が分かれています。メリット、デメリットはあるかと思います。
とりあえず、入力を簡易に行えるように、メモの一行目を自動的にタイトルにするように処理しました。ただ、一行しかないなら、タイトルを空白として、その一行を本文とします。
（こういう感じになります）
なぜこうなっているのかというと、二つの不満がありました。
まず、よくあるメモ送
FirefoxとChromeの編集可能なDivの違い
前回、一行目からタイトルを取り出す処理を実装してみたものの、Firefoxではうまく動いても、Chromeだとなぜかうまくいかない事態に直面しました。これがブラウザツールの面倒なところです。
ちなみに、textLineのカードは、<textarea>ではなく、編集可能な<div>を使っています。contenteditable属性を指定したdIvですね。
<div contenteditable