Hatena::ブログ(Diary)

知のレバレッジを最大化せよ このページをアンテナに追加 RSSフィード Twitter

2014-08-12

Middleman で Slim をサクッと使えるようにする

Middleman の build と、Movable Type の publish ってなんだかシンパシーを感じてしまいますね。ところで、静的サイトジェネレーターの Middleman *1Rails で使われるとてもシンプルなテンプレートエンジン Slim *2 をサクっと使う方法をまとめました。

導入編

もうすでに project をつくってしまった状態で Slim 化する想定です。なお、様々なプロジェクトテンプレートが用意されており、プロジェクト作成時にそれを使うのもよいでしょう。

$ gem install middleman
$ middleman init PROJECT_NAME
$ cd PROJECT_NAME
$ bundle exec middleman s

Slim の導入

Gemfile を編集

gem "slim"

Bundle / Bundle Install

$ bundle

Config.ru を編集

Slim::Engine.set_default_options :pretty => true

Slim::Engine.set_default_options :shortcut => {
  '#' => {:tag => 'div', :attr => 'id'},
  '.' => {:tag => 'div', :attr => 'class'},
  '&' => {:tag => 'input', :attr => 'type'}
}

Slim ファイルの作成と確認

適当な拡張子の slim ファイル (aaaaa.html.slim) を /source 以下に作ってみます。

.welcome
  h1 Middleman is Watching
  p.doc
    = link_to "Read Online Documentation", "http://middlemanapp.com/"

ただそのまま http://localhost:4567/aaaaaa.htmlアクセスしても設定がロードされていないので Not Found になります。そこで middleman server を再起動すれば Slim で記述された内容がレンダリングされます。

Ctrl-C 
$ bundle exec middleman s

デフォルトの application layout を Slim 化してみる

Middleman で用意している layout.erb (source/layouts/layout.slim) を Slim 化したサンプルを下記に貼り付けておきますので、ご参考にどうぞ。

html
  head
    meta charset="utf-8"
    /! Always force latest IE rendering engine or request Chrome Frame
    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
    /! Use title if it's in the page YAML frontmatter
    title= current_page.data.title
    = stylesheet_link_tag "normalize", "all"
    = javascript_include_tag  "all"
  body class= page_classes
    = yield

*1http://middlemanapp.com/jp/

*2Haml よりも少し高速に動作し、より少ない文字量でマークアップが可能 http://slim-lang.com/

2014-07-31

「今は後方互換性を確保しているが、将来変わるかもしれません」を英語でどうやっていうか?

どんどん進化する web service で、どこかで後方互換性を捨てなければならない時がくるかもしれません。そういった免責的な英語の言い回しってどうやっていうべきか、というので事例を調査してみました。

例えば

We maintain this feature for posterity, but is subject to change moving forward.

あくまで「将来変わる」前提ですが、今は互換性残してます! というのがいい感じですね。

2014-07-23

Ruby 2.1.2 と debugger 1.6.6 (1.6.8), pry-debugger が同時に動かない件を解決する

debugger, pry-debugger を使うと rspec の debug 等便利ですが、Ruby 2.1.2 にバージョンあげると衝突する模様。

どんな問題か

Ruby 2.1.2 環境で bundle で debugger をいれようとする、或いは、gem install debugger すると下記のようなエラーになる。

Building native extensions.  This could take a while...
ERROR:  Error installing debugger:
    ERROR: Failed to build gem native extension.

    /path/to/ruby extconf.rb
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

解決

$ git clone https://github.com/mekishizufu/debugger.git
$ git checkout ca451a9bdf
$ gem build debugger.gemspec
$ gem install debugger-1.6.6.gem

そもそも

  • ruby 2.x の debugging には byebug, pry-byebug *2 が推奨されている

参考

2014-07-17

Homebrew でいれた rbenv で新しい ruby version をいれるようにする作業メモ

brew upgrade ruby-build を事前にしないと、インストール可能な候補自体が更新されない。


念のため brew 自体の更新
$ brew update

rbenv がインストール可能な ruby の version 候補自体を更新する
$ brew upgrade ruby-build

インストール可能な version の一覧を取得
$ rbenv install -list

インストールしてみる
$ rbenv install 2.1.2

切り替え可能な候補に先ほど入れた 2.1.2 が追加されていることを確認 ( 複数形だと、切り替え可能な一覧 )
$ rbenv versions

ローカルの作業環境を切り替える ( version 単数形 だと今どの version つかっているか)
$ rbenv local 2.1.2
$ rbenv version

2014-07-16

本ブログの人気記事まとめ

「知のレバレッジを最大化せよ」でアクセス数が多い記事のランキング ( 2014年7月版 ) をつくってみました。

1位: SoftbankiPhonedocomo.ne.jp のメールを受信する方法

  • http://d.hatena.ne.jp/mabots/20131226/1388048244
  • ついカッとなって書いた記事ではありますが、やはり潜在的な需要が高いのか、技術系の記事を差し置いてダントツでした。ドコモソフバンどちらも契約しているが、いつも使っている iPhone でまとめてキャリアメール確認したい時とかに便利ですし、格安 SIM カードが増えるともっと需要があるのかもしれません。もうちょっと Tips 系のエントリーもしていこうかと思います。

2位: iOS アプリケーションを社内配布する時に検討すべきことまとめ。iOS Developer Enterprise Program 比較

3位: iOS Developer Enterprise Program Production (Distribution) Certificates の運用ハマりどころ

  • http://d.hatena.ne.jp/mabots/20130628/1372415750
  • これも前職で実際にインシデントになったことをまとめた記事です。いきなり運用でハマるとテンパりますよね。そして、さらなる二次災害が起こるという。(秘密鍵の上書き合戦・・等) iOS Developer Program とってからそろそろ一年たつなーという時に改めて読むとなにをすればよいのか整理されるかと思います。

2014-05-30

Backlift、サービス終了のお知らせ

静的ページを Middleman *1 などから local に publish して dropbox 経由で簡単に deploy できる Backlift がサービス終了してしまうようです。理由としては、高機能なユーザアカウント管理機能やデータベース機能があまり使われず、ほとんど静的ページの作成が中心となっていたからとのこと。今後は静的ページにフォーカスした Brace をつくっていくそうです。

http://brace.io/

strikingly のような GUI ベースのサービスもありますが、今 wordpressCMS として利用している方などは、手元の環境で css / html 編集して簡単に deploy できる Brace という選択肢もありそうですね。

I've got good news, and bad news.

The bad news is that we're shutting down Backlift (the backend-as-a-service for front-end developers) soon. Any apps currently on Backlift will no longer be available.

The good news is that you're eligible for a free website on Brace.io. Brace is a new service that offers simple, hackable, static websites. It syncs with your Dropbox, just like Backlift. Just click the link below to redeem the coupon for your free site:

(snip..)

So why the change? Backlift was powerful, but our advanced features, such as databases and user accounts, weren't being used. Most users, it turned out, were building static websites. So we focused on creating an amazing experience for managing static sites.

That's what led to Brace. Brace is faster, offers password protection, and provides a draft and production version of each website. We believe this is a much better product for getting simple websites online quickly.

If you have production content on Backlift, please migrate to Brace, or another service. If you need help with such a migration, shoot me an email and I'll see what I can do! Thanks for trying out Backlift!

//Cole

Cofounder of Backlift.com and Brace.io


Brace.io

どんなファイルが実際に同期されるか見てみます。

  • Dropbox から deploy できるのは 3-4 手間省けてやはり便利
  • FontAwesome、html5shiv、jquery などひと通りモダンなものがはいっている

tree

.

├── README.txt

├── css

│   ├── font

│   │   ├── FontAwesome.otf

│   │   ├── fontawesome-webfont.eot

│   │   ├── fontawesome-webfont.svg

│   │   ├── fontawesome-webfont.ttf

│   │   └── fontawesome-webfont.woff

│   ├── ie

│   │   ├── PIE.htc

│   │   ├── backgroundsize.min.htc

│   │   ├── html5shiv.js

│   │   └── v8.css

│   ├── images

│   │   ├── arrow.svg

│   │   ├── banner.svg

│   │   ├── loader.gif

│   │   ├── poptrox-closer.svg

│   │   └── poptrox-nav.svg

│   ├── skel-noscript.css

│   ├── style-mobile.css

│   ├── style-narrow.css

│   ├── style-normal.css

│   ├── style-wide.css

│   └── style.css

── images

│   ├── bg-alt.jpg

│   ├── bg.jpg

│   ├── fulls

│   │   ├── 01.jpg

│   │   ├── 02.jpg

│   │   ├── 03.jpg

│   │   ├── 04.jpg

│   │   ├── 05.jpg

│   │   ├── 06.jpg

│   │   ├── 07.jpg

│   │   └── 08.jpg

│   ├── pic01.jpg

│   ├── pic02.jpg

│   └── thumbs

│   ├── 01.jpg

│   ├── 02.jpg

│   ├── 03.jpg

│   ├── 04.jpg

│   ├── 05.jpg

│   ├── 06.jpg

│   ├── 07.jpg

│   └── 08.jpg

├── index.html

└── js

├── init.js

├── jquery.min.js

├── jquery.poptrox.min.js

└── skel.min.js


2014-05-26

Macbook Air にいれた開発用 MySQL 5.6.xx の メモリ使用量が異様に多い

homebrewMacbook Air ( Mac OS X 10.8 ) mysql をいれると、最近の 5.6以降がはいりますが、アクティビティモニタでみると、コンスタントに462MB ほど消費してしまっています。メモリが貴重な MBA では激重です・・。

今回の MySQL バージョン的には

$ mysql -V
mysql  Ver 14.14 Distrib 5.6.13, for osx10.8 (x86_64) using  EditLine wrapper

原因

対策

  • my.cnf を設置 して table_definition_cache を最小値にします
    • /usr/local/etc/my.cnf 等に設置する
そもそもどういうもの?
# The number of table definitions (from .frm files) that can be stored in the definition cache.
# If you use a large number of tables, you can create a large table definition cache to speed up opening of tables.
# The table definition cache takes less space and does not use file descriptors, unlike the normal table cache.
# The minimum and default values are both 400.
table_definition_cache=1400
今回は最小値として 400 をセット
table_definition_cache=400

結果

  • 71MB 程度に減りました。すっきりです。

2014-05-01

Google Drive や Gmail のストレージ容量拡張画面がちょっと草食男子風

単位容量あたりのコストがかなりお得になった Google DriveGmail で共通で使えるストレージ容量を拡張する画面がちょっと味気ない。理由としては、次アクションが何なのか説明が明示されておらず、「選択」という小さなボタンしかないから、草食系男子風味になってしまうのかと。

f:id:mabots:20140501215641p:image


ついでに容量などを比較。

写真などを貯めていくとあっという間に容量が増えるオンラインストレージですが、Google Drive は圧倒的なので、上の草食系なインタフェースにもかかわらずとりあえず大量に写真をおいておく場合はオススメ。写真やら動画を置いておくと 100GB くらい結構現実的には到達してしまいます。

表 にしてみると差は歴然。
サイズ Google Drive Apple iCloud Dropbox
50GB $1.99/mo $8.33/mo $9.99/mo
100GB $1.99/mo 対応不可 $9.99/mo
500GB $9.99/mo 対応不可 $49.99/mo
1TB $9.99/mo 対応不可 対応不可

2014-03-24

sms:// での body 指定

こういうやつ *1 をやりたい時に所謂モバイルブラウザーでは

<a href="sms://+3490322111?body=Interested%20in%20Product%20AA2">
More info for producto AA2</a>

うまくいかないけど、結論的には

  • HTML 単体では Mobile Safari やら Android 標準ブラウザーでは対応厳し目
    • ( Wireless Universal Resource File (known as WURFL) で body のような params をサポートするということになっているが)

http://answers.oreilly.com/topic/2166-how-to-send-a-text-message-from-your-mobile-website/

2014-03-19

三菱東京UFJ銀行を名乗る怪しいメールが来たので、銀行のサイトを見たらなんだか凄いことになっていた件

話題の三菱東京UFJ銀行を名乗る怪しいメールが私にも送信されてきました。(※届いたとしてもくれぐれもクリックしないように)

************************************************************************
         三菱東京UFJ銀行Eメール配信サービス
************************************************************************

2014年「三菱東京UFJ銀行」のシステムセキュリティのアップグレードのため、貴様のアカウントの利用中止を避けるために、検証する必要があります。

以下のページより登録を続けてください。

((URL は省略)) 

――Copyright(C)2014 The Bank of Tokyo-Mitsubishi UFJ,Ltd.All rights reserved――

で、実際に三菱東京UFJ銀行アクセスすると

被害もしくは相談が急増しているのか、ファーストビューが警告で覆い尽くされてました。過剰に警戒してしまうかもしれない気もしつつ、点滅したり、スクロールしたりするテキストや黄色と黒をつかった工事中っぽいヘッダに若干の懐かしさを覚えてしまいました。

f:id:mabots:20140319153601p:image:w640

スマートフォン解析