Sublime Text 3でMarkdownプレビュー

「OmniMarkupPreviewer」をインストールすれば使用可能。

インストール

  1. Sublime Textを起動して、上部メニューの「Sublime Text」-「Preferences」-「Package Control」をクリックする。
  2. Package Control: 「Install Package」を入力してクリック(「In」まで入力してEnterでも可)。
  3. 「OmniMarkupPreviewer」を入力してEnter。しばらくするとインストール完了。

Markdownのプレビュー方法

  1. Sublime Textの右下にある文字列(Syntax)をクリックしてMarkdownを選択する。または、上部メニューの「View」-「Syntax」-「Markdown」からでも選択可能。※これ重要
  2. command + alt + O を押すとブラウザが勝手に立ち上がってリアルタイムのプレビューモードになる。

参考画面

RailsAdminにモデル追加(自動認識っぽい)

RailsAdmin使って管理画面を作ったあとに、モデルを新規追加したい場合は、Railsサーバーを再起動すれば自動認識されるっぽい。再起動しないと左メニューのNAVIGATIONに追加されなかった。

たとえば、以下はTrainerモデルを追加してRailsサーバー(rails sコマンドを停止してもう一回実行)したらTrainersが表示された。

Rails bundle installのconflictエラー対応メモ

ActiveAdminで使うGemを追記してbundle installしたときの対応メモ。

  1. bundle installコマンドを実行すると、以下のエラーが表示される。
Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.
  1. Gemfileファイルで指定しているバージョンをすべて外して保存する。

  2. gem listコマンドでバージョン確認後、gem cleanupコマンドを実行する。

  3. bundle updateコマンドを実行する。そして解決。

Rails ActiveAdmin入れるとscaffoldしてもindexとかshowが生成されない

RailsでActiveAdmin入れたあとに、rails g scaffoldで自動生成すると、controllerにindexとかshowが生成されなくなる。

「InheritedResources::Base」というのがファイルの冒頭についてしまい、Rsourcesで定義されるindexやshowなどの定番のアクションの記述を省略しても、動作するようになってしまう。

これを解決するためには、application.rbファイルに以下を記述することが対応可能。

config.app_generators.scaffold_controller = :scaffold_controller

参考サイト

ActiveAdminを入れたら一緒にinherited resourcesも入ってscaffoldテンプレートが上書きされてしまう

WPプラグイン – 更新中にエラーが発生しました: ダウンロードに失敗しました。 Unauthorized

WordPressプラグインを更新したところ、以下のエラーが表示された。

CM Tooltip Glossary Pro+ の更新中にエラーが発生しました: ダウンロードに失敗しました。 Unauthorized

よく見ると、ダウンロードリンクが表示されていたため、アクセスしてみたところ、「Your download link has expired」と表示された。
おそらく、セッションかなにかの期限が切れたから、ダウンロードできない状態になってしまっているだけっぽい。

しょうがないため、対象のプラグインサイトにログインしてプラグインをダウンロード後に手動で更新(pluginsフォルダに直接ぶちこむ)して解決した。

参考サイト

【WordPress】DigiPress専用プラグインが更新できないときは手動で更新しよう!そして、もうひとつの方法とは!?

ElectronでSoundCloudプレイヤー開発

アプリ開発とはいえないぐらいショボいのですが、デスクトップPC/Mac向けアプリ開発で、Electronが流行っているため、少し試してみました。

SoundCloudを再生するアプリ

Firefoxなどのブラウザで音楽を再生できるSoundCloudというサービスがありまして、UIが優れていて操作しやすく、音楽もストリーミングでいろんなものが聞けるので、昔から使っていました。

ですが、ブラウザ上でいろんなタブを開いていると、メモリ消費が多くなりすぎるので、ブラウザを再起動することが多いのですが、そうするとSoundCloudも落ちてしまうので、別アプリとして起動したいと考えていました。

いくつかのMac用SoundCloudアプリを試しましたが、いずれも安定せず、曲が再生できなかったり、途中で止まったりと、使えるものがない状況でした。推測ですが、SoundCloud APIを使って、がんばって独自のUIでアプリ開発されたものと思いますが、逆にそれが安定しない理由なのではと考え、思い切って、「ただのPC版SoundCloudを表示して再生するだけのアプリ」を作りました。

SoundCloudのUIが、すでに音楽プレイヤー風になっていることや、ほとんどの画面が非同期遷移で作られていることから、アプリとしてPC版を表示するだけでも、アプリっぽい感じになりました。当然ですが、非常に安定しています。

アプリのイメージ

Dock(下のメニューバー)の「青い音符つき雲」アプリをクリックすると、起動します。

アイコンは、Webalysさん作成の雲アイコンを使わせていただきました。

アプリのソース

こちらに格納しました。

Simply Listen to SoundCloud – GitHub

Electronの仕様が把握できれば、すぐに作れます。ものすごい簡単でした。
いろいろと踏み込んで開発する場合は、HTML、CSS、JSの知識がメインで必要になってきまして、そこからElectronの仕様やAPIを調べて開発する感じになるかと思います。

このアプリは、Electron知識が0の状態から調べていき、環境準備、プログラミング(PC版読み込むだけなので、ほとんど何もしてませんが)、アイコン調整やリリースファイル(Macのappファイル)、GitHubアップなど、全て込みで3〜4時間程度で作りました。リリースファイルの作成にハマってしまい、これで1時間ぐらいは使いました。

参考サイト

以下の2サイトが非常にわかりやすいです。

用語集プラグイン CM Tooltip Glossary Pro+の設定

有名な用語集プラグインの無料版「CM Tooltip Glossary」だと、標準の投稿や固定ページには用語ハイライトに対応しているのですが、ACFで登録したカスタムフィールドには対応されていません。有料版の「CM Tooltip Glossary Pro+」を購入するとACFにも対応することができます。

用語ハイライトのイメージ

以下は、「昇華印刷」という用語と説明文を登録したため、該当キーワードにマウスを重ねると、説明が表示されます。

なお、キーワードの前後には空白のスペースを入れることで、用語ハイライトとして認識されるようになります。

実際の動作イメージはこちらを参照(「スペック」という箇所に用語ハイライトがあります) → MassdropでALTキーボード購入 – コトコト

ACFのカスタムフィールドへの対応

有料版の「CM Tooltip Glossary Pro+」を購入したあと、該当プラグインの「Settings」メニュー > 「General Settings」タブより、以下の設定を行います。

  • Highlight terms in ACF fields? → チェック入れる
  • Types of fields to highlight → チェック入れる

    ハマりポイント1

    「Types of fields to remove the WP functions:」は、チェックを入れると、改行が自動削除されます。意図しない挙動を防ぐため、チェックを外したほうがよいでしょう。

    ハマりポイント2

    ACFのカスタムフィールドに、のショートコードだけを入力しているような場合(たとえばInstagramだけ入力)、CM Tooltip Glossaryプラグインの上記設定と競合してうまく表示されませんでした。
    なんでもよいため、カスタムフィールドには冒頭に文字が入力されている必要があります。

カスタム投稿タイプへの対応

カスタム投稿タイプかつACFのカスタムフィールドを利用していますが、そのままの設定で動作しました。特に意識する必要はないようです。

関連キーワードを非表示にする

記事の下部に、以下のような形で「Related Terms:」という関連するキーワードが自動的に表示されてしまいます。

「Settings」メニュー > 「Glossary Terms」タブより、以下の設定で非表示にできます。

  • Show linked glossary terms list under post/page? → チェック外す

補足

記事の中身をいろいろと変えてしまうようなので、設定は一通り、ご覧になることをオススメします。

Angular CLIインストール後にngコマンドが見つからない場合

MacのターミナルでAnagular用にnpm経由でインストールしてから、

npm install -g @angular/cli

CLIのngコマンドを入力したところ、コマンドが見つからないと表示された。

mymac:test user$ ng
-bash: ng: command not found

aliasで一時的にPATHを通す

ngコマンドのPATHが通っていないだけなので、AngularのCLI(ngファイル)がインストールされた場所を確認してから、以下を実行で解決。

alias ng="/usr/local/Cellar/node/9.7.1_1/lib/node_modules/@angular/cli/bin/ng"

上記の「ng=”〜”」は、インストールした場所によって変わるため、適宜変更する。「npm install -g @angular/cli」を実行時にインストール場所がターミナルに表示されているはずなので、それを入力する。

ただし、あくまで一時的な反映なので、永続的に反映しておきたい場合(ターミナル起動した場合)は、.bash_profileに設定が必要。

.bash_profileにalias設定する

ターミナル起動時に読み込まれるbash設定を開く。

vi ~/.bash_profile

.bash_profileに以下を追記する。

alias ng="/usr/local/Cellar/node/9.7.1_1/lib/node_modules/@angular/cli/bin/ng"

ついでに、「ll」で「ls -la」としたかったため、ついでにllのエイリアスも追記した。

alias ll="ls -la"

追記が完了したらviでファイルを保存して抜ける。そのあとに、.bash_profileをすぐに反映するために、sourceコマンドを実行する。

source ~/.bash_profile

これでターミナル起動時に、ngコマンドの実行(ついでにllコマンドも)ができるようになった。

参考サイト

パワポで箇条書きの点とテキストの距離を縮める方法

PowerPointの水平ルーラーのつまみをいじって距離を詰めることもできるが、テーブル表なんかで、一括選択して全ての枠内に反映したい場合は、

  1. 行間のオプションを選択

  2. ぶら下げを選択して、「テキストの前」と「間隔」の大きさを両方とも数値を小さくする

これで箇条書きの点とテキストの距離が縮まります。

参考サイト

PowerPointでインデント・箇条書きの位置調整

WP Twenty Seventeenテーマの1カラム表示

先ほどWordPressのTwenty-Seventeenテーマがver1.6への更新通知がきていたので更新したところ、表示が2カラム形式に戻ってしまっていた。本来は1カラムで設定をしていた。

  • 外観 > カスタマイズ > テーマオプション(この時にプレビュー表示が固定ページじゃないとこのメニューが表示されない) > 1カラム に設定する
  • 外観 > カスタマイズ > ウィジェット > ブログサイドバー で全てのウィジェットを削除する

雑な感じだったけど、これでもとの1カラム表示に戻った。