WebComponentsを始めよう

こんにちは。naoto@qword.meです。私の記事では、Qwordで採用している要素技術を紹介していきます。まずはWebComponentsです。

WebComponentsとはなにか

ざっくりいうと、カスタムUIコンポーネントを作成、共有するためのWeb標準です。以下の要素で構成されています。

• Template
• Custom Elements
• Shadow DOM
• HTML Imports

http://webcomponents.org/

Polyfill

残念ながらこれを実装しているブラウザはまだ多くないため JavaScript Polyfillを利用する必要があります。

Polyfillはbowerで管理するのがよいでしょう。(bowerの説明は省略。)

$ bower install webcomponentsjs

htmlの内に以下のコードを書いてwebcomponentsのpolyfillをloadします。Browserがひとつでも要素技術を実装していない場合には、polyfillをloadするようにしています。

<script>
  if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {
    // We're using a browser with native WC support!
  } else {
    document.write('<script src="bower_components/webcomponentsjs/webcomponents.min.js"><\/script>');
  }
</script>

Polymer

WebComponents自体は低いレベルの要素技術であり、実際の開発ではその上に構築されたJavaScriptのライブラリを採用することになることが多いでしょう。現時点での代表的なものはPolymerとX-TAGです。QwordではPolymerを採用しています。

次回以降は、必要に応じてWebComponentsの解説を加えつつ、Polymerの解説をしていきます。

Rocketeerを使ってみた

こんにちは。岡田です。

今回は、PHPのデプロイツールであるRocketeerを使ってみたので記事にする。

GitHubにおいてあるアプリケーションを、環境 Aから、リモートの環境 Bにデプロイしようと思う。

FuelPHPをインストールする手順と初期設定のメモ

FuelPHPの初心者です。
FuelPHPをインストールする手順と初期設定についてのメモです。

Mac OS でのFuelPHPのインストール手順
1. oilコマンドのインストール
$ curl get.fuelphp.com/oil | sh

インストールが正常になりましたら、下記のコマンドで確認
$ which oil
/usr/bin/oil

2. FuelPHPのインストール
- 作業フォルダを作成
*)例：~/work/fuelphpを想定する場合
$ cd
$ mkdir work
$ cd work

- FuelPHPのインストール
下記のコマンドで実行すれば、GitHubからFuelPHPの最新の正式リリース版をダウンロードします。
$ oil create fuelphp

3. apacheの設定
- Mac os のデフォルトでapacheをインストールしていますので、それを使えば便利です。
- デフォルトの作業場所は下記になります。
/Library/WebServer/Documents
- apacheからインストールしたfuelphpにアクセス出来るようにシンボリックリンクを設定します。
$ ln -s ~/work/fuelphp/public fuelphp

4. FuelPHPの動作確認
- ブラウザでhttp://localhost/fuelphp/にアクセスしてみます。
FuelPHPのWelcomeパージが表示されれば、インストールは完了です。


しかし、下記のようなエラーが発生していますので、最初にTimezoneの設定が必要です。

・エラー情報：
-----------
Fuel\Core\PhpErrorException [ Error ]:
date_default_timezone_get(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected the timezone 'UTC' for now, but please set date.timezone to select your timezone.
-----------

・Timezoneの設定：
下記のファイルを開いて
/work/fuelphp/fuel/app/config/config.php

Line 97辺りに、デフォルトのTimezoneを設定します。
例：
'default_timezone'   => 'Asia/Tokyo',

上記の設定を保存して、再度ブラウザでhttp://localhost/fuelphp/にアクセスし、FuelPHPのWelcomeパージが正常に表示するようになりました。

Swift + Realm DB をCocoaPodsで導入する手順

MacにCocoaPodsをインストール

1. gemを使ってCocoaPodsをインストール

   sudo gem install cocoapods
   

   プレリリースのベータ版が必要になることがあるので、念のため併せてインストール

   gem install cocoapods --pre
   

2. terminalを再起動する

   忘れがちです。
   再起動後にバージョンを確認しインストールされていることを確認します

   pod -v
   

3. Set Up

   pod setup
   

XcodeのProjectを作成

Xcodeでの詳しいProject作成方法は省略します
使用する言語はSwiftを選択します
説明のため名前をProjectの名前をSampleとして以下説明します

Xcode ProjectにCocoaPodsを導入する

1. Xcodeで作成したプロジェクトのディレクトリに移動

   cd project root directory
   ls -la
       Sample
       Sample.xcodeproj
       SampleTests
   

2. CocoaPodsを初期化

   pod init
   

   Podfileが作成されます

3. Podfileの編集

   target 'Sample', exclusive: true do
       pod 'Realm'
   end
   
   target 'SampleTests', exclusive: true do
       pod 'Realm/Headers'
   end
   

   ブロックを用いて、ターゲットごとにインストールするpodを分けることが出来ます。
   exclusive: trueとすると、ブロック内のpodのみしかインストールしないようになります。

4. pod initした同じディレクトリで以下のコマンドを実行します。

   
   pod install
   

5. Xcodeのプロジェクトを一旦閉じて、Sample.xcworkspaceという名前のプロジェクトを開きます。

   この時点で、Realm DBの導入自体は終了です。

SwiftでのRealm DBの利用

CocoaPodsでインストールしたRealm DBはObjective-Cで書かれているので、
Swiftのプロジェクトでも利用するためにBridging Headerファイルを追加します。
以下のヘッダファイルをプロジェクトに追加します。
Sample-Bridging-Header.h

1. 以下の行を追記

   #import <Realm/Realm.h>
   

2. プロジェクトのBuild Settings -> swift compiler

   Objecctive-C Bridging headerの項目に

   Sample/Sample-Bridging-Header.h
   

   を追加する。パスを間違えやすいので注意してください。環境によっては別の階層かもしれません。

3. 確認
   swiftのファイルに

   RLMObject()
   

   等と書いてエラーにならなければ正しく導入できています。