高機能メモアプリ「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

ブログをリニューアルしました


このブログ、つまり、ウェビングスタジオのメインブログをリニューアルしました。

リニューアルというか、長年積み重なった設定を初期化して、a-blog cmsのブログ用公式テーマ「blog2015」をベースにしたという縮小に近い改修です。
blog2015は読みやすく扱いやすいテーマです。使っている他の人のブログを見て気になっていました。この機会に使ってみることにします。

15年近く続けてきたブログが昨年ころから書けなくなり、g.o.a.tへ移転してみたり、非公開の場所で完全にプライベートの日記を書いてみたりしていました。
一方でTwitterやFacebookは大量に投稿していたので、書けなかったのは「役に立つ情報が充実した、人気が出そうな記事を書かなければならない」というプレッシャーのせいだと思います。
私のライフログが、私のドメインにまったく残っていないのは、やっぱり悲しいです。

純粋な技術情報はQiitaで書いているので、今後はブログをはじめた頃の原点に戻って、私個人の日記と対外活動を中心に書いていこうと思います。

ちょっと待て、カテゴリーを消す前に

リニューアルにあたって、記事の分類を、タグのみにしました。昨今のレンタルブログはカテゴリーを廃したものが多いですし、ブログのような雑多な記事は複数のタームを持つタイプの分類の方が自分自身も後々探しやすいです。

a-blog cmsはエントリーからカテゴリーを外すのが簡単です。管理ページで全記事を選択して、一括修正のプルダウンで「カテゴリー>なし」を選ぶだけです。

300件から、えいやっとカテゴリーを剥がしたところで、あることに気づきました。

a-blog cmsは、エントリーURLにカテゴリー名が含まれるということに。

例えば、このブログ内で歴代最高の人気記事となっている「GitHubとBitbucketの比較:Webデザイナーの業務にはBitbucketが向いている」だと、

https://webbingstudio.com/weblog/internet/entry-651.html

https://webbingstudio.com/weblog/entry-651.html
になり、すべての被リンクが切れてしまうということです。

心の中で「ああああああああああああああああああああああああああああああああああああああああああ」と叫びましたがもう遅いです。それに、ある程度手数やリスクをかけても、このタイミングでカテゴリーは廃止したい気持ちは変わりません。

加筆

アップルップルのかずみちさんから「.htaccessを書かなくてもいいんだよ」と、「entry_301_redirect」オプションのことを教えていただきました。これがオンになっていると、エントリーのファイル名に重複がなければ、カテゴリーを変更してもエントリーのリンクが切れません。

結局、以下のように.htaccessを書いてリダイレクトさせました。どう考えてももっと短い書き方があります。

# a-blog cms以外のコンテンツ(a-blog cmsを動作させないディレクトリ)
RewriteCond %{REQUEST_URI} !^/?weblog/life/
RewriteCond %{REQUEST_URI} !^/?weblog/work/
RewriteCond %{REQUEST_URI} !^/?weblog/cms/
RewriteCond %{REQUEST_URI} !^/?weblog/webdesign/
RewriteCond %{REQUEST_URI} !^/?weblog/others/
RewriteCond %{REQUEST_URI} !^/?weblog/internet/
RewriteCond %{REQUEST_URI} !^/?weblog/study/
RewriteCond %{REQUEST_URI} !^/?weblog/think/

・・・

# ブログカテゴリー廃止
RewriteCond %{REQUEST_URI} ^/?weblog/life/
RewriteRule ^/?weblog/life/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/work/
RewriteRule ^/?weblog/work/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/cms/
RewriteRule ^/?weblog/cms/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/webdesign/
RewriteRule ^/?weblog/webdesign/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/others/
RewriteRule ^/?weblog/others/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/internet/
RewriteRule ^/?weblog/internet/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/study/
RewriteRule ^/?weblog/study/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

RewriteCond %{REQUEST_URI} ^/?weblog/think/
RewriteRule ^/?weblog/think/(.*)$ https://%{HTTP_HOST}/weblog/$1 [R=301,NE,L]

私らしいフォント

CSSフレームワークが完成したので、屋号サイトも、シンプルでコンテンツ押しのデザインへのリニューアルを考えているところです。

ブログの外観は公式テーマのままですが、全体のフォントを新しいサイトで使用予定のフォントにしました。
中見出し、本文は「FOT-セザンヌ ProN M」、大見出しは「FOT-ロダンカトレア Pro DB」を採用しています。

https://webfont.fontplus.jp/font-list/cezannepron-m



セザンヌは東京駅でも採用されている比較的ありふれたゴシック体ですが、ヒラギノよりも文字幅が細く、文字の書き始めに強い力が入った跡があります。
背筋を伸ばし、凛と声を張って話す、年配の女性を連想させます。
それは私がなりたい姿で、このサイトに合っている文字かなと考えて選びました。


そんなこんなで、またブログの記事が長くなってしまうのでこの辺で。
書きたいことは浮かんでいるのだから、タイトルだけ付けた下書き記事を作っておくといいのかも。


投稿者名 うぇびん(管) 投稿日時 2018年11月01日 | Permalink

WordPress(ワードプレス)をやめたくなった人へのアドバイス


つい先日、ワードプレス(以下、WordPress)に深刻な脆弱性が発見され、かなりのウェブサイトが改ざんの被害を受けました。
ネットで評判が良かったので、なんとなくWordPressを使っていたけれど、やめたいと思っている人も多いかもしれません。

「無料で高機能で便利だったけど、怖いので違うブログにしたい…」
「ブログのことはWordPressしか知らないし、今後どうしていいかわからない…」

私は、WordPressをはじめとした「コンテンツマネージメントシステム(以下、CMS)」を使ったホームページ制作や乗り換えの仕事をしています。
この記事は「WordPressをやめたい」と悩みはじめた人のための、私から提供できるアドバイスです。


投稿者名 うぇびん 投稿日時 2017年02月24日 | Permalink

CMSのダミー文に、ウェビングスタジオが「吾輩は猫である」を使っている理由


CMS構築での記事の流し込みには自動インポートだけでなく、手入力での投稿も必ず行います。サーバーとの相性によるエラー、インストール失敗などによる不具合をチェックするためです。

先日公開したa-blog cmsテーマ「site2015mini」のテスト記事の文章は「吾輩は猫である」「セロ弾きのゴーシュ」「賢者の贈り物」の抜粋となっています。

ここ数年はこれらと、50音の羅列200文字分を使っています。今回はダミー素材に関する試行錯誤の話です。


投稿者名 うぇびん 投稿日時 2015年08月14日 | Permalink

テーマ納品の数ヶ月後、数年後の話


Facebookで流れてきた、奈良市公式サイトのナビゲーションの話題について。

各ページが属しているカテゴリー階層を自動的にトピックパス(ぱんくず)としてリストアップさせる仕様なのかな?と推察します。

それはアクセシビリティを向上させる機能として間違っていはいないのですが、閲覧者の導線をまったく考えずに、関係ありそうなページ(引用元の方は部署同士の決済の手間を指摘しています)に片っ端からつなげば、当然こうなります。


投稿者名 うぇびん 投稿日時 2014年03月24日 | Permalink