カテゴリー別:ぎじつ

「ランディングページ」のススメ

Twitterの連投をまとめるだけでブログ記事を生産する技術に挑戦中の丁稚さんです。
こんにちは。

2017/05/16(火)22:00 から受付の「いちごちゃん(オビツ11)」の通信頒布では、こんな「ランディングページ」を作ってみました。

ランディングページ is 何?

デザイン的には、

  • 楽天の商品ページみたいにやたら長い(が、わかりやすい)
  • 写真が多用されている(イメージが伝わる)
  • 繰り返し「注文」ボタンが出てくる

つくりになっていることが多いです。

ランディングページ制作サービスには、ほかに

  • ペライチ
    純日本産。ただ、どうも利用できるパーツによけいな余白があったりして不安定。画像も5Mバイトまで
  • Instapage
    無料は無料なのだが30日の期間限定

などがあります。

国内のブログサービスは、まだ投稿画像のファイルサイズ制限が多かったりして窮屈なんですよね。写真命のディーラーさんには悲しいと思います。そういうときは通販だけランディングページにしてみる手があるかもしれません。

…ちなみにミラドールの公式サイトが JUGEM のままなのは、丁稚さんが手をこまねいているからです。そういうときもランディングページサービスを使えば、すばやく対応できると。

WindowsだってVagrantくらいカンタンにインストールできるんやで!

丁稚さんです。ぎじつ系。

Vagrant って浸透してますね。
丁稚さんはあまり使う機会ないのですが…。
だって OpenVZ とか Docker 使ってたから…。

ただ、ちょっとディストリビューションレベルからインストールを繰り返さなきゃいけない事案があって、いちいちHyper-VのインスタンスをGUIで立てるのもめんどくさいのでVagrantを使ってみました。

しかし! ネットでは
「Windowsではどう使うか知りません」
「OS Xではこうやります」
という情報ばかり!

ええい! Windows だって Vagrant くらい一発インストールできるわ!
と奮起して、カンタンなスクリプトを書いてみました。
ホントはコマンドライン3行ですむんだけど、
ていねいにまとめたんだぜ…。

PowerShellスクリプト(.ps1)として保存し、管理者権限で実行すると、

  • (なければ)Hyper-V をセットアップ
  • (なければ)Chocolatey をインストール
  • (なければ)Vagrant をインストール

してくれるはずです。手順ごとに再起動が要求されるというワナ…。

Hyper-V なので Windows は x64 で Professional 以上じゃないとダメだと思います。丁稚さん、VMWare とか VirtualBox と相性悪いねん…。ちなみにこのブログはHyp(以下検閲)。

Vagrant を使うときも、

のように --provider=hyperv オプションをつけるのを忘れないであげてください。

あと、真の Windows ユーザーならターミナルは TeraTerm だと思いますが、Vagrant から TeraTerm を使うには、

とかいうPowerShellスクリプトを実行すればOK(C:/programs/teraterm の部分は TeraTerm のインストールディレクトリパスに書き換えてね)。

さらにさらに、プロビジョニングツールに Fabric を使うとかいう好き者は、

という PowerShell スクリプトを実行すれば Python(2)も Fabric も、さらに Vagrant-Fabric プラグインもインストールしてもらえるよ♥

なんだ…Windows で Vagrant、かんたんじゃねえか(高倉健)。

でも、丁稚さんのマシンは非力だから二度と使わない! ウワアアン…

Windows 10でエクスプローラーのコンテキストメニューに「PowerShellをここで開く」を追加する

丁稚さんです。例によってぎじつ系メモ。

Windows 10は(2017年3月現在)、エクスプローラ上でのコンテキストメニュー(右クリックメニュー)に「コマンドウィンドウをここで開く」があります。

そのフォルダで cmd.exe いわゆる「DOSプロンプト」を開くショートカットですね。

でも、最近は PowerShell を開きたいというケースが増えてきた気がします。
ということで、右クリックメニューに Open PowerShell Here として PowerShell を開く項目を追加するレジストリファイルを書いてみました。

べつに大したものじゃないですね…。

とはいえ、Windows 10 Creators Update からは cmd.exe に代わって PowerShell が主役になります。今のうちに慣れておいたほうがよさそうです。PowerShell はかなり便利ですしね。

…ほんとは管理者権限で開くようにしたいんだけど runas への引数の渡し方が意味不明でできなかった _o_

【誰得】MILA DOLLのロゴフォントを作ったよ

丁稚さんです。ドールショウが追い込みです。

Accessのレポートがアルファブレンド透過PNGをうまく扱えないのに業を煮やして、
[http://miladoll.jp/](MILA DOLL) のロゴを、
TrueType のフォントにしちゃいました。

ついでなので GitHub で公開しておきます。

M で、

という単体の「M」文字。
m で、

という「MILA DOLL」のロゴが出るように割り当ててあります。

…こんなものを一般公開して誰が得なのか。
単に、丁稚さんがローカルでどこにファイルを置いたか失念してしまったときのリカバリ用です!

あと、ほんとならまじめに作り方とか書いてきちんとした記事にしあげるべきなのだけれど、ドールショウが近いのでパス!(ひどい) というかあまりきれいにできなかったなあ。

なお、ドールショウの告知についてはこちらのTwitterをごらんください!(宣伝)

会話を書きやすくするショートコード [dialog] を追加

丁稚さんです。
こつこつ自作中でこのサイトでも使っている WordPress テーマ skel

基底クラスをつくって「ショートコードがぱぱっとできあがる」ようにしたのに気をよくして、
ちょっと量産しているのですよ。

ということで、会話文(ダイアログ)を書きやすくするショートコードを作ってみました。
(こりはリポジトリ中の一部なのでこのままコピペしたりしても動きません)

たとえば、Markdown の定義リストに合わせて、こんなふうに書くと…

こうなる!

[dialog] 丁稚さん
: ほら! めんどくさい会話形式の表示がこんなにかんたんに!

ダル子
: ということは、わたしの登場頻度が高くなるというわけだわね…

丁稚さん
: そう…なるのかな?
[/dialog]

これわべんり!
…かな?

「定義リストはダイアローグに使ったらいけないんですぅ~」とかいうHTML5原理主義者の指摘は却下です…。

もうひとつショートコードつくったらリファクタリングして、本来の作業に着手しよう。

表入力ライブラリ handsontable の日本語入力が微妙な件

JavaScript でExcelっぽい表入力をさせるなら決定版というライブラリがあるんですけど。

日本語入力が微妙なのですよね。

  • セル内で日本語入力をはじめると最初の打鍵キャラクタが欠落する

という欠点が…え、それ致命的じゃ… (´;ω;`)

先人がいろいろパッチを編み出してくださっているようですが、

いろいろと見て回って修正しても、

  • 別のセルにフォーカスを移しても、前のセルのフォーカスマークが消えない
  • セル入力確定後、なぜかページ上部に強制スクロールされる

といった感じになったりして。

とりあえず、なんとなくがまんできそうな範囲で修正すると、こんな感じになりました。

※結合前のJavaScriptファイルなので、実際に使う場合はプレコンパイルしてください

activeEditor.textareaParentStyle.left = '-9999px'; としている関係で、たぶん横方向に grid が大きいと左端にフォーカスが移っちゃう気がするんですけど、とりあえずいま自分の手元では用が足りるのでこうしています。

なんか理由はわからないでもないんだけど深く追っかけるには深すぎるので断念しました。誰かもうちょっとまともに修正して本家にPRしてくだちい…。

さいきんのGoogle Analyticsでのサブドメインをまとめたアクセス解析設定

老害な丁稚さんです。

アクセス解析といえば(特段の事情や頭の固い企業現場でなければ)Google Analytics。誰だぁ! Site Catalystとか言ってんのは! このサイトもGoogle Analyticsを使っています。

ただ、Analyticsはわりと頻繁に仕様が変わるんですよね…。いま一般に使われているのは Universal Analytics と呼ばれるやつ。その前は 非同期Google Analytics、さらにその前は…。丁稚さんは Universal Analytics になってからはあまり本格的に触ってないので、また設定しなおしです。

サブドメインにわかれているサイトをまとめて計測したい

さて、Analyticsでわりとよく出てくる難題が、

サブドメインにわかれているサイトをまとめて計測したいときどうする?

です。

どういうことかというと、

  • www.hogehoge.jp
  • hoge.hogehoge.jp

のようにサブドメイン単位でわかれているサイトを、ひとつのレポートでまとめて見たいってことです。

Universal Analytics でどうすればいいか、改めて調べ直してみました。
ぶっちゃけ、

[johnson title=”ポイント”] サイトに設置するGoogle Analyticsのタグ
: 変更しなくていいらしい(!)

Google Analyticsレポート設定画面
: 記録するパスの先頭にホスト名をつける
[/johnson]

ということらしいです。

Analyticsのタグはどう設置する?

ふつう、Universal Analyticsのタグは、

こんな感じになります。

いにしえの「非同期コード」だとここに「hogehoge.jpドメイン用としてデータ送信してね」という設定をしなきゃいけなかったのですが、Universal Analyticsでは 特に設定はしなくていい そうです。↑7行目の 'auto' が「よしなにはからいます」という意味だとのこと。

とにかく、どんなサブドメインのサイトにタグを設置しようが、おなじ内容でいいってことですね。こりゃラクだ。

レポート設定画面での設定

ただ、このままだといろんなサブドメインのログが、

www.hogehoge.jp「/index.html にアクセスがありました!」
hoge.hogehoge.jp「/index.html にアクセスがありました!」

と送られてきます。Google Analyticsクンは、デフォルトではそれを愚直にも、

「ああ。/index.html ね。了解。きょうは2件か…」

などと記録してしまうのでラチがあきません。

そこで、Google Analyticsのレポート設定画面で、

記録するときは「/ホスト名/index.html」みたいにしてねー

とお願いをするわけです。

具体的には「フィルタを追加して記録する内容を書き換える」ということをします。

設定には…。
まず、Google Analyticsで計測をおこないたいサイトの↓のような設定画面に行きます。
「ビュー」ペインの「フィルタ」をクリック♥クリック♥してください。

「フィルタを追加」というボタンをクリック。

「ビューにフィルタを追加」という画面になりますね。ここで新しいフィルタを追加します。
むかしのAnalyticsで同様の設定をやった人はだいたいおなじ手順です。

設定内容は以下のように…。

「フィルタ名」
適当でおk
「フィルタの種類」
「カスタム」を選択し、ラジオボタン「詳細」を選択
「フィールドA->引用A」
プルダウンは「ホスト名」を選択、フィールドには「(.*)」を入力
「フィールドB->引用B」
プルダウンは「リクエストURI」を選択、フィールドには「(.*)」を入力
「出力先->構成」
プルダウンは「リクエストURI」を選択、フィールドには「/$A1$B1」を入力

最後に「保存」を押してフィルタを適用します。

こんな感じで希望どおり行く…

…行くんじゃ…

行くんじゃないかな。

というのは、まだ設定してからAnalyticsの画面に反映されるまで待っていないから。

ちゃんと反映されていたらここに報告しておきます。報告がない場合は信用しないでください ^^;

WordPressで手軽に「ジョンソンボックス」を書くためのショートコードをつくってみた

ジョンソン・丁稚さんです。

[johnson title=”かんたんに説明すると”] WordPressでジョンソンボックスを手軽に書けるようにした
: [johnson title="見出し"]...[/ johnson] ですぐ書けるよ

[skel](/tech/2017/0223/79) テーマで使えるよ
: まあ、ほかの人にすぐ使ってもらえるレベルに達してないんですが
[/johnson]

「ジョンソンボックス」ってこういう ↑ 箇条書きにチェックボックスをつけて視覚的にアピールする、広告クリエイティブのことです。
結論ファーストでブログのエントリ書いたり、ランディングページつくるときにべんり。

先日紹介して、このサイト上で開発しながら使ってる「skel」テーマに投入してみました。

使い方は上述のとおりなんですが、

のようにすると、

[johnson title=”見出し”]
箇条書き1

箇条書き内容1

箇条書き2

箇条書き内容2
[/johnson]

になります。

HTML直書きだとまだめんどくさいですね。Markdownと組み合わせると、

で、

[johnson title=”見出し”] 箇条書き1
: 箇条書き内容1

箇条書き2
: 箇条書き内容2
[/johnson]

になるのでなかなかラクです。

テーマにいくつもショートコードを入れ込むのがめんどくさいので、ショートコード実装のための基底もどきっぽいクラスを書きました。

なので [ johnson] ショートコードの実装は短くすみました。こんな感じ:

ぜんぜん「がいこつ」じゃなくなってくなあ、このテーマ…。
でも、ミラドール本体サイトをつくるのにちょっと機能増やさないといけないからなあ…。

wpautopフィルターがかかる前にショートコードを実行させるもっそい汚いやり方

なんだかWordPressとPHPのことばっかり書いてるなあ…ホントはPHP書けないのに…という丁稚さんです。

例によってWordPressのこと。

WordPressはデフォルトで「本文に <p><br> をよしなに追加する」という機能があります(仮に wpautop と呼ぶ)。

ちょっとショートコードやプラグインを書いたことのある人にとって、これは鬼門です。なぜかというと「投稿者が入力したとおりのテキストではなく、wpautop が加工したテキストを相手にしなくてはならない」からです。

図にするとこういう感じで、

本文(the_content)に対して、priorityつまり優先順位が 10wpautopが実行されてから 11 のショートコード群が呼ばれます。

具体的にはどうなるか。たとえば [markdown]...ほげほげ...[/markdown] とかいって「囲った内容をMarkdown化するショートコード」を書くと、ほげほげの部分に勝手に <p><br> が入ってきてしまいます。Markdownはいわゆる「HTMLブロック要素」内のマークアップを無視する使用なので、うまく動かなくなります。

まじめな対策としてはいくつかあります。下のページさんなんか細かく書いてありますが。

  1. wpautop を無効にする
    → 無効でもいいんだけど。サイト全体に影響が出ますね^^;
  2. wpautop の優先順位を本来の 10 より下げる(12 とかにする)
    → ほかのショートコードの実行に影響が出るかもしれない
  3. 上掲サイトのような方法
    → 現状ではこれがいちばんよいのだけれど、正直見通しがよくない気がする
  4. 優先順位 9 に自分のショートコード用フィルタを登録し、自前パースする
    → ショートコードの結果に wpautop がかかるのが気に入らない

ということでいまひとつ決定打がない…。

しかたないので、こんなふうにしてみました。

  • 優先順位 9 で自分のショートコード要素が内包するテキストをぜんぶ base64 エンコードする(改行もなにもなくなる)
  • 自分のショートコードの処理が呼び出されたら、まず受け渡された内包テキストを base64 デコードする
  • あとはふつうにショートコードの実装をする

図にするとこうです。

むっちゃくちゃ汚い実装ですね ^^; でも、丁稚さんみたいに実力のないプログラマが他人のパーサを乗っ取ってなにかするとき、わりと重宝する手法です(前科がたくさんあるらしい…)。

ちなみに、一部のサンプルコードを載せておきます。

preg_replace_callback を使ってすごいことになってますね。
単に正規表現でパースするだけならまだしも [\s\S]*? とか使ってるので…。
不特定第三者の入力を受け付けるショートコードだと RDoS 攻撃の対象になるかもしれません。
サイト運営者しか使わないショートコード向けならだいじょうぶでしょう。
本気で使うときは元コンテンツの md5 をキーにキャッシュ取ったほうがいいのかも。

まあ、どっちにしてもいちばん正しいアプローチは こんなことしなくてもすむようなパーサをちゃんと書く ですね…。

WordPress の JetPack Markdown をほかのテーマやプラグインなどのメソッドから使うよ

ソースを grep してしらべた…。「Singletonだぜウェーイ」としか書いてなくて何の役にも立たないコメントに悩まされつつ…。

なお、wpautop というフィルタが実行される前に使わないと、全体に <br><p> が勝手に入るため使い物にならないもよう。