これはすごい。便利すぎるmacアプリ2個見つけてしまった件【作業効率化】

PageLayersとSlicy。

今後の作業が激変しそうなmacアプリを2個も見つけてしまいました…..

僕が知らなかっただけでしょうか。そうだとしたら今まで相当損をしていたような気がします。

そこまで思わせるような作業の短縮には持って来いのアプリを紹介します。

WordPress Widget Customizer – Tips.

WordPress 3.9 から追加された「Widget Customizer」でのTips。

「Shift + クリック」で、ウィジェットをクリックすると、カスタマイザーの方でウィジェットが開く。

ウィジェットにマウスホバーすると、フロントのウィジェット部分がフォーカスされる。

ソースは

wp-includes/class-wp-customize-widgets.php  
wp-includes/js/customize-preview-widgets.js

あたりを参照。

テーマ関係なく動作するはずですが、テーマによってはバッティングするかも。

それだけ。

transmitのディスクマウント機能 × codekitが便利すぎる

最近本格的にsassやlessなどのcssプリプロセッサを使い始めた1shiharaです。

まぁ、先日あったHTML5勉強会のお陰です。
windowsの時にはいちいち変換→アップロードという手順を踏まなければならなかったので、すごくめんどくさいという印象でした。
しかし、どうやらcodekitというソフトを使用すると簡単にできるみたいですね。
そこから実際に使い始めて見た印象ですが、

神っすね。もう普通の作業並みのスピードを保っていられる。
しかも、ブラウザもオートリロードしてくれるので至れりつくせりです。
でもね。それも所詮ローカル環境のみの話だろと。思っていたんですよ僕は。
クライアント様にとりあえずトップだけでも先にサーバーにアップして欲しいなんて言われると諦めてたんですよ。

一回一回保存してtransmitにドラッグアンドドロップ。

結局こうなるのかと。

いやいや、でも待てよ。いちいち普通の開発者さんたちがこんなこと繰り返してるのか？

やっぱり大事なのは探究心ですよね。

探し始めてまずmac fusionというサーバーをFinderに表示するソフトを見つけたのですが、いろいろあって結局使えず。
それでもへこたれずに探しました。

くそー。transmitってmacで一番使えるFTPクライアントじゃないのかとか。
もうね、多少なりとも恨みも入ってました。
意地でも探してやる。みたいな感情もありましたね。
でもよく考えるとtransmitって正直使い倒したことないんですよね。少なくともごく平凡なFTPクライアントとしてしか使っていませんでした。
ちょっといじくってみるかとtransmitを触っていたんですが、

そこには気になる「ディスクマウント機能」の文字が!!!!!1111
気になってwebサイトを見てみると僕が探していた機能がそこには書いてありました。

[browser-shot width=”700″ url=”http://www.kevinleary.net“]

なんて時間の無駄だったんだ。結構、1,2時間ぐらいは時間たってました。
transmit様悪口いったりしてすみませんでした。
やっぱり最強のFTPクライアントソフトの名は伊達ではなかったんですね！

ということでこの機能で一体どんなことが出来る解説します。

1. sublime textにファイルごと突っ込んでそのまま編集＆保存。

sftpなんていらなかったんだ…..

でも、バックアップには気をつけよう。

2. codekitにもそのまま突っ込んでそのままコンパイル。

コンパイルされたファイルも当然サーバー上にそのまま吐き出される。

テキストエディタで保存するだけでコンパイル × アップロードも完了。

3. FInderのUIでファイル操作が可能になる。

しかも結構軽い。

でも探したらかなり有名な機能だったんですね。

はぁ、もっと前から知っておけばバリバリのsass使いに慣れたのに。。。。

【nginxはやい】AWSにサーバーを移行しました。その際のメモ。

先月のAWS(Amazon Web Service)の勉強会に参加した時に決意したこと。

 AWSでサーバーを構築して見せる！！(ドンっ)

…みたいな感じだったんですが、nginxでつまづき気づけば2週間。

いやー、やっぱりサーバーって難しいです。

この2週間黒い画面とにらめっこでなんとか今日解決しました。

長かった。そして長かった。ホントーにながかったです。

nginxのconfigファイルとどれだけにらめっこしたか….

そして結局php-fpmのほうの設定という熱い展開でした。

苦労したのでメモっときます。

ちょっと寄り道 – Amazon Web Serviceについて

Amazon Web Service(以下AWSとします)は、かの有名な米Amazon社が提供するクラウド・コンピューティングwebサービスのことです。

Iaas呼ばれているサービス形態ですが、他にはwindows Azureや、

Google Apps engineが有名どころです。

クラウド・コンピューティングについては以下の記事が参考になるのではないかと。

5分でわかるクラウド・コンピューティング – アットマークIT

平たくいうと、PC(サーバー)をインターネットを通じて借りるといったサービスです。

AWSのメリットといえば安い。早い。そして簡単にできる。
とよく言われています。

僕もAWSについては早い段階から知っていたのですが、今まで使う機会が中々ありませんでした。

実際に使うにはクレジットカードとPCがあれば使用出来ますので、是非試して下さい。

nginx(エンジンエックス)について

nginxとはオープンソースのWebサーバです。
webサーバーには他にも様々な種類があります。
普段皆さんがよく使っているapache(アパッチ)や、
Microsoft製のIIS(Internet Information Services)というものもあります。

前者の２つ、nginxとapacheはオープンソースであり、大抵のOSに対応していますが、
後者のIISの方はwindows上でのみ稼働します。

コチラはよく使われているものですね。

(no title)

Responsive and Adaptive Design

レスポンシブ & アダプティブ webデザイン

すっかり普及しているレスポンシブwebデサイン ( 以降 RWD )。
しかし、問題点も数多くあります。

UXを考えたUIを表現しにくい。デバイスごとに最適化しにくい。

デスクトップとモバイル機器の違いは何も画面サイズだけではありません。

使う「場所」も違えば、操作するツールも違う。

ニーズを持つユーザー層や、接続するスピードも違います。

デバイスごとに最適化されているサイトと、
レスポンシブでCSSの範囲で作られているサイト。

どちらが優れたUXをもたらすデザインを考えやすいのか。

いうまでもないと思います。

パフォーマンスが落ちる。

スマホがいくら高性能になってきたからといっても、

デスクトップ・ラップトップとの性能差は大きな壁として存在しています。

javascriptの処理スピード。
ネットへの接続状況。

javascriptがandroidのあの端末だけ異常に重い…….

なんてこともよくある話です。

構成から実装まで複雑である。

RWDでもしフレームワークを使わずに、
一から設計、実装をやる。

経験したことがある人にはわかると思いますが、
多大な時間と労力がかかるものですよね。

開発費用にコストがかかる。

多くの人が未だに、

RWD = ワンソースマルチユース

ワンソース？ = コストが低いのでは？

と考えている方がまだまだいます。

しかし現実は、デバイスごとにサイトを作成するのと同程度、
または、それ以上にコストがかかってしまうこともあります。

( もちろんやり方によっては、RWDで制作することにより、コストを削減できます。)

以上、RWDの問題点について簡単に書き出してみました。

レスポンシブwebデザイン。
確かに多様化するデバイスの中、
我々制作者が対応していくには必須の技術だと思いますが、
まだまだ考えるべき課題はたくさんあります。

レスポンシブwebデザインで以下に効率よく制作するか。
にいては、

Web Design Process for The Fiture – こもりまさあきさん –

のスライドがものすごく参考になるので是非目を通してみて下さい。

( 実際に僕もセミナーで発表をきいたのですが、衝撃的でした。)

臨機応変に手法を変える。

僕は別にレスポンシブwebデザイン自体がダメだとは思っておりません。

上記のデメリットについては、

Responsive Web Design is Not the Future

から拝借させて頂きましたが、
僕は、

A Response to ‘Responsive Web Design is Not the Future’

の意見に賛成です。

技術者の努力・知識によって解決出来る問題もたくさんあります。

そこで僕は、

レスポンシブwebデザインで素晴らしいサイトを作るためにどんな手法があるのか、
これからのレスポンシブwebデザインはどう変わっていくのか。

調べてみました。

レスポンシブwebデザインに広まっている誤解

今のレスポンシブWebデザインは誤解されている

といった文献も見受けられました。

「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点

Responsive and Adaptive Design: Defined

RWDはあくまでも可変するものです。

これがレスポンシブ。

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

そしてこれが、アダプティブ。

.container{
    width:700px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    .container{
        width:420px;
    }
}
@media only screen and (max-width: 767px) {
    .container{
        width:300px;
    }
}

例とすると、

MR.SIMON COLLISON

が典型的なAWDとして紹介されています。

メディアクエリーを利用していますけど、
コンテンツの配置・幅自体は３段階しか種類がありませんね。

RWDは、デバイスのサイズに常に応答する(サイズが可変する)物。
という考え方が、どうやら海外では主流なようです。

でも、このやり方でもいいと思うんですけどもね。僕は。

もちろんクライアントには説明しますが、

予算は少ないけれど、スマートフォン・タブレットでも見たい。
という方にはぴったりなような気がします。

各メディアクエリーの最小幅に合わせないと崩れるというのがちょっとたまに傷ですが。

3つの「アダプティブwebデザイン」

アダプティブwebデザイン。

こちらもレスポンシブwebデザインが考えられた際に時同じく考案された手法です。

Responsiveが「応答性」なのに対し、

Adaptiveは「適応性」という意味。

いろいろ調べ直した結果、
今現在では、4つのアダプティブwebデザインという概念？があるような気がしました。

一つは、先ほど紹介した、メディアクエリーを利用したアダプティブデザイン。
しかし、こちらはなんだかレスポンシブwebデザインの下位互換として広まっています。

そして２つ目が、
デバイスごとに適応させたサイトを作る方法のこと。

ユーザーエージェントごとにスマートフォン専用サイトや、タブレット専門サイトにリダイレクトさせるものアダプティブwebデザインだそうです。

気になる3つ目は、RWDを内包した概念とした立ち位置のAWD。

以下の図をみるとよくわかります。

title

プログレッシブ・エンハンスメントは、最新のブラウザにはよりリッチに、古いブラウザには最低限の見れるものを、というあの概念です。

RWDというのは、 AWDという考え方の中の一つの手法でしかない、というわけです。

最後は、ユーザーのコンテキストに合わせて表示する内容を切り替えるAWD。

レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ

性別、場所、年齢、といったユーザー属性や、ユーザーの行動を分析し、それに合わせたサイト設計をする。

ということらしいです。

上記の記事・元になったスライドでは、主にセンサーを利用した判別方法を使用していました。

確かに、

wifiにつながっている時だけ、背景で動画を流す。
高齢者向けにサイトを用意する

なんてこともできますよね。
ポータルサイトでも、アクセスした地域によってスタートページを変えるということも今までよくあったと思います。

これは、結構面白い考え方だなと感じました。

レスポンシブwebデザイン + アダプティブwebデザイン　＝　？

………ってことで、

レスポンシブwebデザイン ≠ アダプティブ webデザイン
これからのデザインはアダプティブ web デザイン。
センサーや位置情報を利用したもの
RESS ( Responsive web design + Server SIde Compornent )を使用してデバイスごとに適応。

WordPress Development Bookmarks.md

Ghostに移行した後の記事がWordPress関連という、なんとも言えない感じ。

ってことで、WordPressに関するリソースを僕なりにまとめてみました。
あとでGithubなんかに公開したいと思います。
案外時間かかるもんですね。これから更新し続けようと思います！

もし、おすすめのツールとかありましたら教えてください。

元ネタは https://github.com/dypsilon/frontend-dev-bookmarks

github : https://github.com/1shiharaT/WordPress-Developement-bookmarks

WordPress Development Bookmarks

2013/11/11 ~ 14日 Bookmarks.

2013/11/11 ~ 14日に読んでおお！と思ったweb関連記事まとめ。

1. ink

レスポンシブなEmailを作成できるフレームワーク

tool 、Framework

2. Glyphs

アイコンPSD

http://glyphs.bulb9.com/

3. SVGeneration

SVGをGUIで。Data URLでの取得も可能。

http://www.svgeneration.com/

4. OpenNote

Evernote、 MicroSoft OneNoteライクなwebアプリケーションを作成できる。
(ライセンスはどうなのか知らない。)

http://stardrive.us/OpenNote/index.php?folderID=7399&noteID=6936

5. Free vectors icons for download and Icon font | Flaticon

Photoshopのプラグインまで用意してあるフラットなiconセット。

http://www.flaticon.com/

6. Formoid – Beautiful CSS Form Generator

お問い合わせフォームを簡単に作成可能なアプリ。無料版だとformanoidの表記がフッターに入る。

http://formoid.com/

7. Typeform

ダイナミックなお問い合わせフォームの構築ツール。無料プランあり。

https://www.typeform.com

8.Dropzone.js

ドラッグアンドドロップでアップロード出来るエリアを表示するjavascriptライブラリ。

Dropzone.js : http://www.dropzonejs.com/

WordPress でレスポンシブ対策には必須のプラグイン？「BJ Lazy Load」

投稿内の画像を自動で遅延ロード、最適化、リサイズ、キャッシング。
さらには、画面の解像度までみて判断してくれる優れもの。

WordPressでレスポンシブwebデザインを実装するならもはや必須的なプラグインだと思います。

遅延ロードというのは、画像が表示領域に入るまでは別の画像 ( 極端にサイズが小さいもの、透明の画像とか) を表示しておいて、表示領域に入った際に読み込むというテクニックです。

もちろん、レスポンシブwebデザインでなくても使えますので、ぜひともご参考にー。

BJ Lazy Load

人柱になりました。WordPressからGhostへのお引越し。

最近は作業に追われ、ブログの更新も絶え絶えな日々を送っていました。

このままでは、いかん。

…ということで、今まではWordPressでサイトを構築・更新していたのですが、

WordPressから今話題？の Ghost という javascript ベースのCMSに移行してみました。

我ながら突拍子もない…..ですが。

普段の業務では,nodeJSを使用した仕事なんてそうそうないので、ブログを実験台代わりに。

目次

Ghostについて

引っ越し準備

サーバー環境を整える

Ghost をインストール

データをインポート

実際の使用感

Ghost って?

今回移行したGhostは、以前からkickstarterで注目を集めていました。
Node.js + sqllite3 + Handlebars.js で構築できるブログソフトウェアです。

http://www.kickstarter.com/projects/johnonolan/ghost-just-a-blogging-platform

Kickstarterで1900万円以上の資金を調達したプロジェクトが今回見事にローンチされました。

簡単に長所を上げると、

オープンソースかつ非営利のプロジェクトである。
複数人での更新がしやすい。
スマートフォン・タブレットへの最適化。管理画面も含め。
マークダウン記法でのブログ更新を軸に構築。
シンプルに記事を更新。
結構WordPressに似ている箇所が幾つか。構築しやすい？

…..こんなところでしょうか。

もちろん短所も有ります。

まだ、発展途上である。 (現在 0.3 ver)
nodeJS を使用するため、サーバーを選ぶ。
カスタマイズをするなら、根本的なコードから構築しなければならない。
ドキュメントが少ない。

というか、はっきり言ってWordPressからGhostへ移行するメリットは、現時点ではありません。

今回の移行は完全に趣味です。

お、なんか試してみたいなという方のご参考になればと思います。

Ghostへの引越し準備

まずはGhostへの引越し準備をしましょう。

今回は、WordPressからの引越しなんですが,
探したらWordPressのプラグインが用意してありました。

http://wordpress.org/plugins/ghost/

プラグインをインストールすると、メニューの「ツール」に「Export to Ghost」が表示されます。

上記画面下部の「Download Ghost File 」をクリックし、jsonファイルをダウンロード。
この中にこれまでの記事情報が保存されていますが、注意点が幾つか。

エクスポートされるのは「投稿記事」のみ。固定ページはエクスポートされません。
(そもそも、Ghostにまだ固定ページ・投稿ページといった概念がない。)
内容によってはインポート時にエラーがでることも。
もちろん、記事内でショートコード等使用している場合にはそのまま出力されます。
画像データはURLとして出力されるので、残しておく必要・または新しく置くディレクトリ階層に置換する必要があります。( URLに含まれる文字・ /[スラッシュ] は[バックスラッシュ]でエスケープしてあるので気をつけて下さい。 )

まぁ、完全にコンテンツを移行できるもんではありません。

サーバー環境を整える。

今回使用したサーバー概要です。

amazon web service s2 / t1.micro
OS : centos 6.4
基本的なパッケージは導入ずみ。

Ghostはインストール手順がOS環境によって変わります。

今回はcentos ですので,

http://www.howtoinstallghost.com/how-to-install-ghost-on-centos-server-6-4/

を参考にしました。

( その他のサーバーに関しても http://www.howtoinstallghost.com/ に掲載されてますのでご参考に。)

Node.jsをインストール

$ mkdir ~/tmp
$ cd ~/tmp 
$ wget -N http://nodejs.org/dist/node-latest.tar.gz
$ tar xzvf node-latest.tar.gz
$ cd node-latest
$ make
$ sudo make install

上記でインストール完了。
最後に、

$ node -v
$ npm -v

を実行し、バージョンが表示されたらNode.jsのインストール完了です。

Ghostのインストール

ついに本題であるGhostのインストールです。

https://ghost.org/signup

から登録し、ダウンロードすることもできますが、githubのレポジトリからも直接ダウンロードすることもできます。

https://github.com/TryGhost/Ghost

が無難に公式サイトからダウンロードするのが無難かと。

まずは、サーバーの公開ディレクトリに最新のghostをダウンロードしてきます。

$  curl -O  https://ghost.org/zip/ghost-0.3.3.zip

次に展開します。

$ unzip ghost-0.3.3.zip

config.sample.jsというファイルをconfig.jsという名前でコピー。

$ cp config.sample.js config.js

次にconfig.jsを編集していきます。

// # Ghost Configuration
// Setup your Ghost install for various environments

var path = require('path'),
    config;

config = {
    // ### Development **(default)**
    development: {
        // The url to use when providing links to the site, E.g. in RSS and email.
        url: 'http://web-layman.com', //公開するサイトのURLへ変更

        // Example mail config
        // Visit http://docs.ghost.org/mail for instructions
        // ```
        //  mail: {
        //      transport: 'SMTP',
        //      options: {
        //          service: 'Mailgun',
        //          auth: {
        //              user: '', // mailgun username
        //              pass: ''  // mailgun password
        //          }
        //      }
        //  },
        // ```

        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-dev.db')
            },
            debug: false
        },
        server: {
            // Host to be passed to node's `net.Server#listen()`
            host: '0.0.0.0',  //127.0.0.0から 0.0.0.0へ変更
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
            port: '80'  //2368から80へ変更
        }
    },

       // ### Production
    // When running Ghost in the wild, use the production environment
    // Configure your URL and mail settings here
    production: {
        url: 'http://web-layman.com',  //公開するサイトのURLへ変更
        mail: {},
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost.db')
            },
            debug: false
        },
        server: {
            // Host to be passed to node's `net.Server#listen()`
            host: '0.0.0.0', //127.0.0.0から 0.0.0.0へ変更
            // Port to be passed to node's `net.Server#listen()`, for iisnode set this to `process.env.PORT`
            port: '80' //2368から80へ変更
        }
    },

    // **Developers only need to edit below here**

    // ### Testing
    // Used when developing Ghost to run tests and check the health of Ghost
    // Uses a different port number
    testing: {
        url: 'http://0.0.0.0:2369', // 127.0.0.0:2369から0.0.0.0:2369へ変更
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-test.db')
            }
        },
        server: {
            host: '0.0.0.0', //127.0.0.0から0.0.0.0へ変更
            port: '2369'
        }
    },

    // ### Travis
    // Automated testing run through Github
    travis: {
        url: 'http://0.0.0.0:80', // 127.0.0.0:2368から0.0.0.0:80へ変更
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost-travis.db')
            }
        },
        server: {
            host: '0.0.0.0', //127.0.0.0から0.0.0.0へ変更
            port: '80' // 2368から80へ変更
        }
    }
};

// Export config
module.exports = config;

config.js を編集完了後、以下を実行。

$ npm install --production

これでGhostはインストール完了です。
次に、

$ npm start

と恐る恐る入力してください。
Ghostが無事起動した方はおめでとうございます！

失敗した方はご愁傷様です。

結構サーバーの環境によってはエラーをはきます。 ( nodejsやnpm関係 )

もしできない方は、

http://docs.ghost.org/

や、

https://ghost.org/forum/

にて探して下さい。( すみません。 )

データをインポート・運用

無事にGhostがインストールされたら管理画面にアクセスしてみましょう！

http://hogehoge.com/ghost

(hogehoge.comはご自身のURL)

アカウント名・パスワードを入力。

( ここのアカウントがhttp://ghost.org で登録したアカウントと連動しているのかは未検証です。…..っていうか連動してなきゃおかしいな。)

WordPressの記事データをインポートしたい場合は

http://hogehoge.com/ghost/debug/

にアクセスするとExport・inportができる画面が表示されます。

実際の使用感

この記事が初めての投稿記事なんですが、
正直後悔している部分も……(泣)

タグ機能は用意されているが、アーカイブなどの実装はまだ。
投稿時のjsがやたら重い。スマートフォンだと動かない。( 本末転倒な展開 )
拡張性がまだ低い。
etc….

ちなみにスマホだとこんな感じの管理画面。

まぁ、まだ出たばかりのCMSですのでこんなもんかなと。

集中して記事を書くには今のところ問題無いかも！( 震え声

普通の個人的なブログをやる分には問題は無いかな。
けど、最終的にはWordPressに近づくんでしょうかね。

ローカル環境でのインストールは比較的簡単だと思うので、
是非試してみて下さいー！

参考リンク

https://ghost.org/

http://www.howtoinstallghost.com/

canvasが簡単に描けるフレームワーク : kinetic.js【HTML5】

昨日WCAN 2013 springに参加しましたが、HTML5関連の話が主題な感じでした。

数あるAPIの中でもメジャーなのはやはりcanvas。ですが、普段javascriptを書かない人にとっては結構とっつきにくいですよねー。
なので、jQueryレベルの感覚でcanvasを描けるフレームワーク「kinetic.js」を紹介します。