選択されているタグ : tool , これはいい

高機能メモアプリ「Bear」を、全力で勧めたい5つの理由

先日のa-blog cms Training Campがはじまる前、北九州のデザイナーの、小佐々さんと話しました。
小佐々さんはXDのパワーユーザーで、来週のSaCSS Specialに登壇する田村さんと組んで、XDテンプレートとCSSフレームワークのパッケージを配布しています。
プロトタイプやカラーテーブルの使い方などが勉強になりますので、ぜひゲットしてください。

GitHub - tamshow/jwps: The Japan Web Production Standards is a production system for building fast



で、本題です。話の流れで、小佐々さんから「Bear」というメモアプリを薦められました。
Campの間、お試しで使っていたのですが、たった二日間ですっかり気に入ってProに課金してしまいました。

Bear - Notes for iPhone, iPad and Mac

Bearは、特にコーダー・ブロガーにお勧めしたいアプリです。特に気に入ったところを挙げてみます。

目に優しい



これが、私のBearの画面です。公式サイトの画面と違って黒くなっています。 BearはMacOS Mojaveからの新機能、ダークモードに連動していて、モードを切り替えると自動的にBearも暗色テーマに変わります。Proではさらにテーマが追加され、ブラウン系や色覚障害者向けなどもあります。

私は最近、目の負担を減らして集中力を上げる目的で、普段のアプリをできるだけ暗色に変更しています。Evernoteもすでにダークモードに対応していますが、Dropbox Paperはまだのようです。対応アプリがどんどん増えていってほしいですね。

ドキュメントが書きやすい

Bearは基本的に、マークダウン記法でノートを作成します。 と言っても見出しを作るときにいちいち#を書く必要はなく、ショートカットキーでサクサク見出しやリストを作っていけます。

私はメインのメモアプリはEvernoteでしたが、ここ一年はほとんど使用していませんでした。リッチテキストなので体裁が崩れやすく、レポートなどの長文を書く気になれなかったのです。Bearはそういう心配がなく、MacBookでもiPhoneでも思いついたときに書けます。



リンクについても、ブロガーに優しい仕様になっています。インターネットに接続している状態でURLをペーストすると、自動的にリンク先のtitle要素を反映したリンクを作成します。 Bear内の他のノートへリンクすることもできます。

なお、使いどころがわかりませんが、デスクトップ版は縦書きで表示・編集できます。本文を右クリックで「レイアウトの方向」メニューが出てきます。

マークダウン・HTML相互変換ができる



これは、Movable Typeの人気プラグイン「MTAppjQuery」の作者、奥脇さんのブログ記事です。MTAppjQueryの新機能について説明されていたので、Bearに控えました。
記事のHTMLをコピーしてからノートを右クリックし、Proで追加されるオプション「次からペースト>HTML」で、貼り付けています。

MTAppjQuery v2.3.0 リリース - 深い入れ子の JSON データを効率よく扱う mt:Foreach、mt:NestVar タグを追加 | かたつむりくんのWWW


Bearでは、HTMLコードを貼り付けると、余分な要素や属性を除去して、Bearに適した体裁に変換してくれます。

もちろんその逆も可能で、選択した範囲を各種形式でクリップボードに入れることができます。


これが、コーディングやCMSのコンテンツ流し込みのときに活躍します。以下のように作業したところ、とても流し込みが捗りました。

  1. 既存サイトの、新サイトへに引き継ぐ箇所のHTMLをBearにペースト
  2. または、送られてきたDOCX形式ファイルをBearにインポート
  3. 見出しレベル、文言などを再考
  4. Sublime TextへふたたびHTMLでペースト

多彩なエクスポート

Bearに保存されたノートは、さまざまな形式で書き出せます。 無料版でも、プレーンテキスト・RTF・マークダウンが選択できますが、ProではPDF・HTML・DOCX・JPGがアンロックされます。


この機能はかなりうれしいです。先述のHTML変換と、これに課金していると言ってもいいくらいです。 JPG形式を選ぶと、ほんとうにすべてが一枚絵で書き出されてなんだか面白いです。一番考えられる使い道が、Twitterで長文を画像化してツイートすることでしょうか。

さらに、ノートを選択した状態でメニューバーの「ファイル>メモをエクスポート」を選ぶと、EPUB形式でも書き出すことができます。これで作った電子書籍を販売してもいいのかはわかりませんが。


マルチタグ


Bearは、TwitterやInstagramのハッシュタグのようにタグを付けてノートを分類することができます。

それだけではなく、「cms/ablogcms」とスラッシュで区切ると、タグに階層を持たせることができます。 タグには識別アイコンをつけることができ、特定の名前のタグは自動でアイコンが付きます。WordPressだけアイコンがついて悔しいです。

なぜかアイコンにはポケ◯ンボールとか、◯ルダのトラ◯フ◯ースとか、ス◯ラト◯◯ンとか、◯ン◯ーダーらしきものが見えます…ジャパンのゲームだいすき!な開発者さんのようです。意味もなく使いたいです。


できないこと

高機能なBearですが、あくまで個人利用に特化したメモアプリです。
2018年11月時点では、他のユーザーとのノートの共有はできません。また、ノートにパスワードをかけたり、二段階認証を設定することもできません。サーバー情報などの保管には向いていないと考えた方がいいです。

アプリに関連づけられたアカウントを切り替えるのも難しいため、会社用は別のアカウントにしなければならない、といったケースにも適していません。

このあたりはやはり、引き続きEvernote、Dropbox Paper、Googleドライブの役割になるでしょう。

One more thing



そんなこんなで、このブログの原稿もBearで書いています。久しぶりに書くことが楽しくなっています。

もうひとつBearの良いところをあげるとしたら、

イメージキャラの、しろくまがかわいい。
かわいいは正義。
かわいいはモチベーション。

公式グッズショップがあるので、ぜひ、このしろくまのイラストのTシャツを販売してほしいです。


投稿者名 うぇびん 投稿日時 2018年11月28日 | Permalink

美しいゲーミングキーボード「Razer BlackWidow」を仕事に導入して三ヶ月経ちました


私たちの仕事の機材で、最もピンキリとなるのがキーボードです。安い品でもコーディングはできるので、後回しになりがちです。

自宅では、MacBook Proを「クラムシェルモード」で使っています。これまではApple純正のUSBキーボードを使っていましたが、三ヶ月前にPCを自作したときに、思い切ってメカニカルキーボードを購入することにしました。

Happy Hacking KeyboardREALFORCEも検討しましたが、最終的に購入したのは業務用ではなく、ゲーム用の「Razer BlackWidow X Tournament Edition Chroma」でした。名前が長いです。

Razer BlackWidow X Tournament Edition Chroma テンキーレスゲーミングキーボード 英語配列版 【正規保証品】 RZ03-01770100-R3M1


Razerはゲーミングデバイスの有名メーカーのひとつです。高級なゲーミングデバイスはeスポーツの激しい操作にも耐えられる堅牢さとキー反応速度を持っているので、コーディングにも役立ちます。

これを購入した理由、三ヶ月使ってみての感想などをまとめます。


投稿者名 うぇびん 投稿日時 2017年07月09日 | Permalink

iPhone・iPadで読みたい本を「sigil」で作ってしまえ

iPhone/iPad用のアプリケーション「iBooks」がリリースされました。

iBooks はストアから本を購入するだけでなく、自分で用意したEPUB形式の電子書籍を読むこともできます。最近では、既存の文書を自分で電子化することを「自炊」というらしいです。

EPUB 形式の電子書籍を作れるフリーウェア「sigil」を使って実際に作ってみたので、手順やポイントなどまとめてみます。

「sigil」は、ブログやDreamweaverと同じ感覚で電子書籍を作成できるソフトで、HTMLなどのデジタル文書からの変換に適しています。Win/Mac/Linuxをカバーしています。

sigil – Project Hosting on Google Code

今回のサンプルは私の好きな短編「山月記」にしました。

実は青空文庫にはEPUB変換ブックマークレットが既にあるのですが、今回は敢えて自炊してみます。

最初のテスト原稿が@smokeymonkeyさんの「妻は俺の嫁」だったことは内緒です。

いちばん簡単な作り方

「sigil」をインストールして起動すると、すぐに編集画面になります。

通常はプレビュー画面モードになっていますが、Web制作のスキルがある人には分割モードか、コード画面モードの方が取っ付きやすいと思います。
モードは画面の上の方にある、本と<>が重なったボタンで切り替えできます。

ひとまず、HTMLを<body>タグ内にコピペしてみました。

書籍名/著者は、メニューバーの「Tools」から「Meta Editer」を選択すると設定できます。
書籍名を入れておかないと、iTunesやiBooksで見たときに何の本だかわかりません。忘れず設定しましょう。

左上の大きなボタンの左から三番目をクリックすると、すぐEPUB形式の文書が書き出されます。
このファイルを音楽ファイルなどと同じ感覚でiTunesライブラリに読み込み(自動でブックとして扱われます)、iPhone/iPadと同期すれば、iBooksのリストに作った書籍が登場して、読めるようになります。

使えないHTMLタグに注意

…と言いたいところですが、私の場合、最初は失敗しました。

何故かルビ部分で改行されとる |||orz

どうも、<ruby>タグが入っているとiBooksでは不具合が出るようです。
余分なタグやインラインスタイルが入っているものをそのまま使うと、読み込み速度が遅くなるという話もあるので、一旦テキストエディタに貼り付けてスタイルをリセットした方が無難だと思います。

章ごとに分割してみる

「山月記」は章立てでないので文章を貼り付けただけでもいいのですが、途中で強制的にページを分割することもできます。

左のツリーの「text」フォルダを右クリック→「Add New Item」を選択でXHTML文書がひとつ増えます。文書と文書の間は、ビューワー内で強制的にページ送りとなります。
右上の大きなボタンの中に「自動でセクションを分ける」ボタンもありますが、意図しないところで分かれてしまうことが多いので手動でやった方がいいと思います。

また、文中に<h2>以下の見出し要素があると、要素の内容がiBooksの目次に反映されます。
見出しは、ソースコード画面で直接マークアップするか、テキストをドラッグ→左上のプルダウンリストから任意の見出しを選択で指定できます。

画像を貼る

文書内に画像を貼ることも自由にできます。
私は外字の部分に使用してみました。
高解像度の画像を貼るとiPadでもきれいに見られますが、書籍の総ファイルサイズに影響するので、コミックなどの場合はサイズダウンなどの工夫が必要そうです。

CSSを指定する

EPUB形式の電子書籍の実態は、XHTML文書です…
ということは、CSSの定義も可能です。

左のツリーの「Styles」フォルダを右クリック→「Add New Item」でCSSが新規追加されます。

これだと自動的にHTMLにリンクしてくれないようなので、私はコード画面を開いて、いつものWeb制作と同じ感覚でhead要素内に<link>を追加しました。

iBooksの場合、既存の枠にインラインフレーム風にHTMLが埋め込まれる形になります。
そのため、文字色と背景色は全く意味がありませんが、本文の基本文字サイズ・行間・見出しの体裁を調整したり、1ページ目だけ体裁を変えたりといった「sigil」の内部機能だけではできない細かな調整ができます。
コーディングのスキルがある人にはおすすめです。


そんなこんなで、自分で本まで作れる時代になってしまいました。
まだ表紙を作る方法がわからないので、その辺りも時間があるときに試してみようと思います。

「iBooks」がリリースされたものの、今のところストアでは日本語の本をほとんどリリースしていません。
ですが、既存の本のリリースを待つよりは、自分がいつでも読めるようにしたいテキストを自炊したり、自作の小説やテキストを電子化してセルフリリースするのが電子書籍の醍醐味であり、本当の楽しみ方なのではと思います。
2chの長編読み物やコラムサイト、CMSのオンラインマニュアルなど自炊したいところです。

ただし、著作物を扱うときは慎重に。
iTunesのときと同じように、あくまで個人の範囲内で楽しみましょう。

著作権がなくなってない作品を不特定多数に配布とか、もってのほかですよ!
っていうか私が納品したサイトのコーディング丸パクして別のサイト作ったやつ出てこい(微笑)


投稿者名 うぇびん 投稿日時 2010年07月09日 | Permalink