wp-gfm v0.9

GitHub上で公開している自作のMarkdownのWordpressプラグインを更新した。

https://github.com/makotokw/wp-gfm/releases
GitHub Flavored Markdown for WordPress

内部で使っているphp-markdownのバージョンアップと、フッターのデザインを少しポップにしてみた。

Markdown記法はWordPress本家のJetPackプラグインで出来るので基本的にはそちらを使えばいいはず。

wp-gfmはショートコードで囲った部分だけMarkdown変換するように作ってあり、Jetpackに乗り換えて過去記事を変換しなおすのが面倒なので使い続けている(メンテナンスし続けている)ところではあり、もともとソフトウェアエンジニアしか興味ないだろうと思ってGitHubにひっそり公開しているだけなのだが、何故か定期的にがつけられている。しかも大半が海外の人になっている。

ひょっとして世の中にはJetpackが使えない環境があるのだろうか? wp-gfmのスタンスとしては名前のとおりひたすらGitHubのMarkdownに記法、デザインを寄せるということでやっているのでそのあたりが良いのかもしれない。

Pebble Time 2対応の道

Pebble Time 2(Emery)向け対応がなかなか大変そうな雰囲気。

Pebble Time 2は来年出る予定のPebbleの新型。名前の通りカラー四角のTimeの後継。解像度が144×168 → 200×228、DPIが172 → 202と変わる。

Pebble Time 2にはBezelモードというのがあって過去のPebble Classic(Aplite),Pebble Time(Basalt)向けに作ったWatchappは144×168のセンター寄せで周囲を黒い縁にして表示してくれる。なのでなにも対応しなくても実行できることはできる。昔iPadでiPhoneアプリを動かすときにあったときに似ている。

しかしDPIが上がっているので同じ解像度で表示しても文字などが小さくなってしまうと思われる。iPadならまだしもスマートウォッチでこれは致命的なので対応しないとなかなか使ってもらえないと思う。

丸型のPebble Time Roundが出たときはPBL_ROUNDPBL_RECTで分岐して四角か丸かで最適化した。今後はPBL_DISPLAY_HEIGHTPBL_DISPLAY_HEIGHTで頑張れということらしい。以下の例では228がTime 2、180がTime Round向けということになる。

#if PBL_DISPLAY_HEIGHT == 228
  uint8_t offset_y = 100;
#elif PBL_DISPLAY_HEIGHT == 180
  uint8_t offset_y = 80;
#else
  uint8_t offset_y = 60;
#endif

画像もexample-image~color~rect~228h.pngなどとできそう。

とりあえずレイアウトそのままでMineclockをそのまま実行したらこんな有様。

Round 2が出るのでは?と期待してTime 2はまだ買っていないが、微妙な解像度やDPIの違いはエミュレータでは確認できなさそうな気がするので凝ったデザインのWatchfappを作っている場合は実機を買わないと行けないような気がする。199ドル。
https://www.pebble.com/buy-pebble-time-2-smartwatch

PebbeのTimeline Quick View対応

Pebble WatchfaceであるMineclockでPebble OS v4.0のTimeline Quick Viewに対応してみた。

残念ながらTimeline Quick Viewは丸型のPebble Time Roundでは対応しておらず、四角のPebble Timeで使える機能なので押入れで眠っていたPebble Timeを引っ張り出して確認したりした。Timeline Quick ViewはWatchface上に次のTimelineの通知が表示される機能で、まぁ次の予定が時計上で確認できるというものになる。設定で30分前からとか5分前から表示などを設定できる。

Watchfaceの開発者としてはTimeline Quick Viewが表示されてもユーザインタフェース上問題ないようにレイアウトする必要がある。ちなみにPebble TimeではTimeline Quick Viewが高さを50pxくらいとるのでwatchfaceによってはかなりレイアウト上の制限を受ける(Pebble Timeの解像度は144×168)。Timeline Quick Viewに対応していないWatchfaceが重要な時間情報を画面の下で表示していると致命的である。

今後、機種によってTimeline Quick Viewのサイズが変わってくるとかなり面倒なことになるので、今回はデジタル時計部分を無理やり表示するという方法でとりあえず対応した。なおエミュレータを使うと予定がなくてもTimeline Quick Viewの表示のオンオフを pebble emu-set-timeline-quick-view --emulator basalt on で確認できるのでまずはそれで確認するのが良い。

アナログの日時計を対応する場合はTimeline Quick Viewが表示された場合と、そうでない場合で2種類の画像を用意して描画処理をしないといけなくなるのでMinelockのように画面の解像度を前提とした凝ったWatchfaceの対応は苦労することになる。

今回はとりあえずの対応をして他のWatchfaceの開発者の様子を見てみよう。

Pebble OS 4.0対応を読む

8/31からは4.0対応が推奨されていくらしい。
https://developer.pebble.com/blog/2016/08/19/prime-time-is-approaching-for-os-4.0/

4.0対応には以下のようなことがある。

  • AppIcon
  • Timeline Quick View
  • AppGlances
  • The Diorite Platform

AppIcon

ようやくAppIconが表示されるようになる。というか初代Pebbleでは表示されていたのだがPebble Time RoundではWatchappのアイコンが表示されなくなってForumでもスレッドが立っていた。以前読んだドキュメントでは28×28のモノクロだったけど、OS 4.0からは25×25のpngになる模様。25×25にしたとしてOS 3以下のPebbleでもちゃんと表示されるのだろうか。

"resources": {
  "media": [
    {
      "menuIcon": true,
      "type": "png",
      "name": "IMAGE_MENU_ICON",
      "file": "images/icon.png"
    }
  ]
}

Timeline Quick View

OS 4からはタイムラインをWatchface上で見れるようになるらしい。これに伴い、Watchface開発者はタイムラインが表示されても邪魔にならないようにレイアウト対応する必要がありそう。

Mineclockでも対応しなければ場所的にデジタル時間が見れなくなるかもしれない。もしくは対応してないとWatchface上に出せないのか。

AppGlances

ランチャー上のWatchappのアイコンやテキストを動的に変えられるようになる。状態を持つアプリでは使えそうだが、今公開しているWatchappでは必要なさそう。

Diorite対応

Diorite(Pebble 2)は144×168の白黒で解像度は初代Pebbleと変わらないのでpackage.jsontargetPlatformsdioriteを追加するだけでとくに何も必要ないだろうという理解でいる。

Mineclock v1.1

Pebble watchfaceであるMineclockに日付を入れて欲しいという要望があったので対応した。最初のバージョンの開発中に一瞬入れていたけどデザインが微妙になったので止めた記憶があったが、とりあえず時間の下に入れてみた。

現在、Pebble Time Roundが黒背景しか見えない問題のせいで実機で確認できていない問題がある。Pebbleのシュミレーターは便利だけどPCのディスプレイではドットの表示が鮮明すぎて細かい部分の調整は実機じゃないとわからない所がある。

あと、今更ながらAtomエディタのプラグインでpb-completionsを入れたら少しだけ補完が効くようになって楽になった。構造体のメンバは出ないようなので完璧ではないが無いよりまし。

Pebble向けMinecraft風Watchface公開

正月くらい(Minecraft風Pebble時計の開発2)に開発していたPebbleのWatchface(時計)を公開した。ゲームのMinecraftの世界に出てくる時計をモチーフにしたものでMineclockと名付けた。

Pebble appstoreのリンクはこちら。

Public Web Link : https://apps.getpebble.com/applications/568aa41c6518afe93f000012
Deep Link : pebble://appstore/568aa41c6518afe93f000012

ビットマップを回転させるとバッテリーを消費してしまうという問題がまだ解決していない。

それで作ったものの塩漬け状態になって放置していたが、マリオの時計(毎分マリオがブロックを叩く)もアニメーションをしているせいかMineclock以上にバッテリーを消費していたのでアニメーションする以上はしょうが無いのかと思うところもあり、取り急ぎバージョン1.0として公開することにした。

バッテリー消費を減らす場合はビットマップを使わずにパスをつかって全部描画するようにしないといけなく、それは今後の課題としては認識はしている。

ソースも公開しているのでWatchfaceの実装の参考に。誰か描画部分をパスで書きなおしたPull Requestを送ってくれないか。

残念なことに、個人的な問題としてPebble Time Roundのディスプレイが壊れたらしく明るい色がホワイトアウトしてしまい、Mineclockもほとんど見えない。そのため現状は黒系のwatchfaceしか使えないでいる。Pebbleのサポートチームとやりとり中。

Pebble Time Round display white out

WordPressで埋め込みMarkdown

ソフトウェアエンジニアにしか需要がないだろうと思い本家プラグインディレクトリではなく、GitHub上で公開しているMarkdownのWordpressプラグイン。

https://github.com/makotokw/wp-gfm/releases
GitHub Flavored Markdown for WordPress

外部のMarkdownを埋め込み表示できないか?というissueをもらったので対応してみた。

[embed_markdown url="https://raw.githubusercontent.com/makotokw/wp-gfm/master/README.md"]

というようなショートコードで埋め込みができる。GitHubではraw.githubusercontent.comでrawコンテンツが取得できる。

ここから下の内容はhttps://github.com/makotokw/wp-gfm/blob/master/README.mdの埋め込み表示となる。面白いから作ってみたけど需要はあるのだろうか。

GitHub Flavored Markdown for WordPress

wp-gfm is the WordPress plugin that convert from GitHub Flavored Markdown by using the PHP-Markdown or GitHub Render API.

Dependencies

How to work

The plugin has two conversions.

[markdown] as shortcode for PHP-Markdown, convert by using \Michelf\Markdown class inside WordPress.

[gfm] as shortcode for GitHub Flavored Markdown, convert by using the Render API outside WordPress. Default Render API is GitHub Render API, limits requests to 60 per hour for unauthenticated requests. Alternatives Render API that works on heroku is here: https://github.com/makotokw/ruby-markdown-render-api

Installation

Download from https://github.com/makotokw/wp-gfm/releases and upload to /path/to/wp-content/plugins/wp-gfm

PHP-Markdown (Recommended)

This conversion depends on PHP Markdown Lib 1.7.0.

Usage

Use [markdown][/markdown] as shortcode on entry.

Example:

[markdown]
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
[/markdown]

Fenced code blocks

Example:

[markdown]
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
[/markdown]

Table of content

left aligned toc.

[TOC]

right aligned toc.

[>TOC]

Example:

[markdown]
# headLineOne

## something

[TOC]

## something more
[/markdown]

Embed content

Supported embed markdown file by [embed_markdown] shortcode.

[embed_markdown url="https://raw.githubusercontent.com/makotokw/wp-gfm/master/README.md"]

Option

Admin > Settings > WP GFM

  • AutoLink (default: no)
  • Code block template
    • (default: <pre class="prettyprint lang-{{lang}}" title="{{title}}">{{codeblock}}</pre> )
<pre class="prettyprint lang-ruby">require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
</pre>

You can use google-code-prettify if you want to allow syntax highlighting.

GitHub Render API

This way is not good. If there are 5 shortcodes in page, the plugin require 5 HTTP requests.

Setup

  • Open WP GFM Settings and set Render URL

Usage

Use [gfm][/gfm] as shortcode on entry.

[gfm]
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
[/gfm]

Result

Result

Development

npm install
grunt debug

LICENSE

The MIT License

Current Version

The line below is used for the updater API, please leave it untouched unless bumping the version up 🙂

~Current Version:0.9~

AmazonJS 0.8

ひさしぶりにAmazonJSを更新した。またも普通に使えている人に嬉しい修正はしていない。

  • キャッシュをファイルキャッシュからTransients APIに変更
  • テーマや他プラグインの巻き添え対策

Transients API

WordPressにTransients APIというキャッシュ用のAPIがある。セットアップにてキャッシュディレクトリを作らせたり、ファイルで保存するのがいい加減古い臭いと思ったのでそれに切り替えた。これで0.8からはセットアップでキャッシュディレクトリを作成しなくて良い。Transients APIはDBに書き込んでいるのでDBの接続が遅いと重くなる恐れがあるけどしょうがない。そもそもDBが重い環境ではページキャッシュしないとやっていけないだろうし。

競合対策

競合対策ではAutoptimizeを併用しても動くようにしてみた。ただAutoptimizeを使うとテーマや他のプラグインからの巻き添えを受けやすくなるので難しい。デフォルトではAutoptimizeはテーマやプラグインのスクリプトを全て一つにまとめるので先に読み込まれたテーマや他のプラグインのJavascriptのコードがコケると以降のプラグインのJavascriptコードが実行されなくなる。Javascriptのコードが実行されなくても大きな問題が起きないプラグインが多いと思うがAmazonJSの場合はくるくるローディングしたまま書き換える処理が実行されない問題が起きて被害が大きい。

今回とあるテーマで巻き添え被害を食らう状態が再現できたので対策を試みた。そもそもAutoptimizeなどの高速化型プラグインを使わない場合、なぜテーマや他のプラグインがコケると被害を受けるのか。一つの要因として 誰かがjQuery関連のコードを失敗すると$(document).ready()で追加したコールバックが呼び出されない という現象があることがわかった。

とりあえずなぜ$(document).ready()のコールバックが呼ばれないのかは置いておいて、$(window).load()は行けるのかとか、直接DOMContentLoadeddocument.addEventListenerしたら行けるのかを調べたら手元ではそちらは呼びだされた。というわけで$(document).ready()がダメでも$(window).load()DOMContentLoadedが発火したら描画するようにしてみた。これで被害は避けられるだろうか。

0.8になって動かなくなった人はテーマを変えたりや他のプラグインを無効にしたりして競合するものがわかればお知らせください。原因が不明な場合は古いバージョンを以下からダウンロードしてダウングレードできます。
https://github.com/makotokw/wp-amazonjs/releases

正直バージョン1.0にするタイミングを完全に逸している。

Pebble Kit JSのコード補完

IntelliJ IDEA(系IDE)でPebble Kit JSのコード補完ができるようにしてみた。

別に補完が必要だったというより、エディタ上でJavascriptの警告(Pebbleが定義されていない等)が表示され自分のコードの警告が埋もれてしまうのを避けるため、エディタにPebbleオブジェクトを認識させようと思ったのがキッカケ。

IntelliJ IDEAではJavascriptライブラリについてDefinitelyTypedというTypeScript型の定義を参照して型情報を認識することができる。DefinitelyTypedについてはQiitaの記事のTypeScriptの型定義ファイルを共有しよう!が詳しい。

ファイルにはひたすらTypeScriptでインタフェース定義を書いていく。

 interface Pebble {
        /**
         * Adds a listener for Pebble JS events, such as when an AppMessage is received or the configuration view is opened or closed.
         * @param type      The type of the event, from the three described above.
         * @param callback  A developer-defined function to receive any events of the type specified that occur.
         */
        addEventListener(type: string, callback: (e: Event) => void): void;

        /**
         * Remove an existing event listener previously registered with Pebble.addEventListener().
         * @param type      The type of the event listener to be removed.
         *                  See Pebble.addEventListener() for a list of available types.
         * @param callback  The existing developer-defined function that was previously registered.
         * @see addEventListener
         */
        removeEventListener(type: string, callback?: (e: Event) => void): void;

https://github.com/DefinitelyTyped/DefinitelyTypedに各ライブラリの定義ファイルが置いてあるので新しいライブラリの定義を追加する場合はPull Requestをおくれば良い。

というわけで送ってみたら取り込まれた。( #8411 @vvakameさんありがとうございます。)

https://github.com/DefinitelyTyped/DefinitelyTypedにあるライブラリの定義は設定のLanguages & Frameworks > Javascript > Download… から追加できる。

しかしながら肝心のC言語(Pebble SDK)の方は未だに補完できないまま放置している。

Pebbleで有料アプリを作る方法

Pebbleには公式のPebble appstoreがあるけれど有料アプリの販売には対応していない。Pebbleアプリ自体はPBWファイルだけでも配布できるからGumroadなどでファイルを売る手もあるが・・・。

Guest Post – My Experience with Paid AppsでPebble appstoreで配布しつつ、有料にする方法が記されている。

KiezelPayというPebble用のライブラリを使うとできるらしい。ブログの記事では別の手段として有料のiOSアプリやAndroidアプリと連携させることでPebbleアプリではなくiOSアプリやAndroidアプリを売る方法も案として挙げている。記事を投稿した人はその方法は自分でiOSアプリやAndroidアプリを作れないという問題と、AppleやGoogleへのマージンが発生することをデメリットとして挙げており、Pebbleアプリを販売する手段として実現したらしい。

KiezelPayではユーザが購入する前に一定の試用期間でPebbleアプリを使うこともできるらしい。KiezelPayはβ版だが、記事はdeveloper.pebble.comで公開されているのである程度公式にも認められた手法なのだろうと予測。今のところ有料Pebbleアプリを作る気はないが技術的な側面で興味が湧いた。