アシアルの社内勉強会で発表した資料を公開します。今回の社内勉強会では、「イケてるデザイン」をテーマに勉強会を開催しました。自分はその中でも「どうやってチームでイケてるデザインを作るのだろうか？」ということをテーマにして話をしました。

Onsen UIを使えばハイブリッドアプリやスマートフォン向けWebサイトにおいてリッチで高速な描画ができるUIを手に入れることができます。しかし多機能かつ多彩な表現を可能にすればするほど、ちょっとしたカスタマイズもしづらくなってしまいます。 それを防ぐのに使えるのがテーマ機能です。色をがらっと変えることで印象が大きく変わります。Onsen UIではOnsen Theme Rollerを用意しており、それを使うことで各UIコンポーネントのカスタマイズを簡単に行えるようになっています。今回はOnsen Theme Rollerの使い方を紹介します。 Onsen Theme Rollerの使い方 まずOnsen Theme Rollerを開きます。 見て分かる通り、各UIコンポーネントが並んでいます。スイッチやレンジ、ナビゲーションバーといったUIコンポーネントに加えて、リストに入ったスイッチ

ハイブリッドアプリでは通常、OS標準のWebViewを使いますが、Crosswalk版はCrosswalkをレンダリングおよびJavaScriptエンジンとして使うようになります。図にすると次のようになります。 通常のハイブリッドアプリがHTML5/JavaScriptのコードを持ち、Android OSが提供するWebViewを使うのに対して、さらにCrosswalk版はChromiumベースのレンダリング/JavaScriptエンジン（Crosswalk）をアプリ内に内包します。 なぜCrosswalkが登場したのかと言うと、これまでハイブリッドアプリにおいてOS間におけるレンダリング/JavaScriptエンジンの違いによる動作、パフォーマンスの違いが大きな問題になってきました。Android 4.4になり、Chromiumベースになったことでパフォーマンスは大きく向上しましたが、そ

こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n

「最新SPA開発を学ぼう！ウェブエンジニアのためのAngularJS入門」という題でPHPカンファレンス2014で登壇してきました

こんにちは、西尾です。 10月ですねー。 食欲の秋、読書の秋、スポーツの秋ですヽ| ゝ∀･*|ﾉ☆ というわけで、アシアルランニング部 秋の部！活動してきました。 フルマラソン42.195Kmを7人のメンバーで走りましたよヽ(｀･ω･´)ﾉ

「HTML5でiOSアプリAndroidアプリを作ろう! 〜HTML5ハイブリッドアプリ開発入門〜」話しました

こんにちは、久保田です。PHP5.6.0alpha1が1月23日付けでリリースされました。 この記事では5.6に搭載される以下の新機能や変更を紹介します。 phpdbgデバッガ 可変長引数のための文法の追加 定数定義での計算のサポート その他NEWSファイルに記述されている変更 PHP5.6.0をビルドして試してみる PHP5.6の新機能を紹介する前に、まずはMacOSXやLinux環境にPHP5.6をビルドして試す方法を紹介します。Windows環境の場合にはビルド済みのバイナリが用意されているのでそれをダウンロードして下さい。 まず5.6.0alpha1リリースの記事にあるリンクから、PHP5.6.0alpha1のパッケージをダウンロードして解凍します。次に解凍したパッケージのディレクトリに進んでconfigureスクリプトを叩きます。

久保田です。『HTML5ハイブリッドアプリ開発[実践]入門』という本を書きました。技術評論社より12月20日付けで発売されます。 HTML5ハイブリッドアプリとは HTML5ハイブリッドアプリとは、通常のiOSアプリやAndroidアプリと同じようにストアからインストールできるけれども、アプリの内側ではHTML5などのウェブ技術で開発されているアプリです。AndroidやiOSなどの複数のプラットフォームに対応できる点や、標準化されているHTML5などのウェブ技術によって開発でき、かつモバイルOSのネイティブAPIを利用できる点などで注目を浴びています。 本書は、今までHTML5ハイブリッドアプリを開発したことがない人向けの入門的な内容から、ハイブリッドアプリの裏側の仕組みなどのアプリ開発に関わるエンジニアのための高度な知識まで、HTML5ハイブリッドアプリ開発に関することの多くを網羅した

こんにちはアシアルの塚田です。 アシアルの開発事例 でも紹介している株式会社タニタヘルスリンク様の健康管理アプリ「ヘルスプラネット」がAdobe AppBox Awards 2013のファイナリストに残ったので、先週の金曜日にADC Meetupで行われた授賞式に参加してきました。 さすがアドビさんMeetupの会場も銀座のおしゃれなパーティースペースで開催されました。 この会場でファイナリストに残った15作品から優秀賞各賞が5作品、最優秀賞1作品が選出されます。 賞がもらえるのかどきどきしながら、各賞の発表を見守っているとデバイス賞なる優秀賞の発表が。 これは来たかもしれません。 予想通り、ヘルスプラネットが見事に優秀賞のデバイス賞に選出されました。 タニタヘルスリンクの坂下取締役がプレゼンテーターとして登場し、ヘルスプラネットのプレゼンを行いました。 MonacaとアシアルのPRも大き

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

こんにちは、久保田です。 PHPで仮想マシンベースの正規表現エンジンを作ってみる 第二回です。 前回の第一回では、PHPで作成する正規表現の仕様の紹介や正規表現のパーサの実装を行いました。今回の記事では、正規表現を実行する仮想マシンをPHPで実装します。 正規表現を実行する仮想マシン まず、実装する仮想マシンの仕様について解説します。Regular Expression Matching: the Virtual Machine Approachでは仮想マシンについては以下のように記述しています。 To start, we'll define a regular expression virtual machine (think Java VM). The VM executes one or more threads, each running a regular expression 

こんにちは、久保田です。 皆さん正規表現は使っていますか? PHPに限らずどんな言語を使っていても、正規表現にお世話になっていないプログラマはいないと思います。しかし、その正規表現がどのように実装されているかについては知らない方が多いのではないのでしょうか。 この記事では、その正規表現エンジンの実装方法の一つである仮想マシンによる正規表現エンジンの実装方法を解説しつつ実際に簡単な正規表現エンジンを作っていきたいと思います。 正規表現エンジンの実装方法 正規表現エンジンの実装方法はいくつかあるのですが、それの一つに仮想マシンによって正規表現のマッチング処理を実行するやり方があります。PHPで利用している正規表現エンジンであるPCREはこの方式を採用しています。 仮想マシンによる実装方法は、正規表現というよりもプログラミング言語の実装方法の一つとして知られています。Rubyの最もメジャーな実装

久保田です。 6月8日(土曜日)に開催されるBuild Insider OFFLINEというウェブ開発者向けのイベントで講演します。会場は日本マイクロソフト株式会社様の品川本社セミナールームです。 話す内容は、クライアントJavaScriptでのデータバインディングとインタラクティブなUIについてです。講演概要が以下です。 Room C(48) 15:40～16:30 データバインディングによるインタラクティブなUIの効率的な表現 アシアル株式会社　久保田 光則（UI/UXデザイナー兼ソフトウェアエンジニア） 近年注目を浴びるJavaScriptフレームワークの多くで採用されるデータバインディング。 そこにはよりインタラクティブなUIがウェブアプリにも求められている背景があります。 このセッションでは、DOM操作を主体とした伝統的なやり方と比較しつつ、 データバインディングがインタラクティ

興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし

wireframe-zoning.jpg by luc legay, on Flickr こんにちは、久保田です。 ウェブサイトのデザインやコーディングを始める前にワイヤフレームは作っていますか?ワイヤフレームは、以下の様な内容を設計するのに利用されます。 ・ページ間の遷移 ・ページの内容 ・ページの大まかなレイアウト これらの項目についてチームやクライアントと予め合意しておくと、後に続くビジュアルデザインやコーディング時の前提を共有でき、作業をスムーズに進めることが出来ます。これからどのようなウェブサイトを作るのか?ということをきちんと共有することでデザイナーやコーダーや関係者と意思統一することができるわけです。 この記事では、このワイヤフレームを書けるツールやウェブサイトを紹介します。 OmniGraffle 古くからある使いやすいMacOSX用のアプリケーションです。ワイヤフレームだ

こんにちは、最近コード書く時間がなくなってPhotoshopいじっている時間の方が主になってきました、久保田です。 Photoshopを使った画像書出しの時には、面倒なスライス作業をやらなければいけません。この記事では、Photoshopで面倒なスライス作業を劇的に効率化してくれるSlicyというアプリの紹介をします。 スライス作業をやっているうちに日が暮れる Photoshopで作成した画像を書き出す場合には、たいていスライス機能を用いて画像を書きだしていくことになると思います。スライス機能がないと一枚のキャンバスから複数の画像を書き出すことができないのでこれを使わざるを得ませんが、大変面倒くさい。ちょっと書き出すと以下みたいにめんどくさい部分がぼろぼろ出てきます。 ・ 書き出す画像のひとつひとつにスライスの領域を設定しなければならない ・ レイヤの位置を調整すると、スライスの位置も同じ

各質問に答えていくと設定ファイルができあがります。 今回はテストフレームワークはjasmine、 ブラウザはChrome、Firefox、Safariとしています。 ※各質問の選択肢はタブで切り替えられます。 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > Firefox > Safari > Whic

ジェネレータでは、yield構文を使ってforeachなどで利用できる値の列を生成することができます。 このコード例を見ただけだと、関数で配列を返したりイテレータを使うのと何が違うのかわからないと思います。PHP5.5で実装されたジェネレータの一番の特徴は、ジェネレータ内で一度値を生成すると計算が途中で止まって呼び出し元へ制御が復帰し、再びジェネレータ内に制御が戻ると以前の計算の位置から処理が再開されるということです。 以下のような例を実行します。 <?php function hoge() { echo "generating a\n"; yield 'a'; echo "generating b\n"; yield 'b'; echo "generating c\n"; yield 'c'; } function fuga() { $ret = []; echo "add a\n";