「データバインディングによるインタラクティブなUIの効率的な表現」Build Insider OFFLINEで登壇しました「データバインディングによるインタラクティブなUIの効率的な表現」Build Insider OFFLINEで登壇しました
WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass
下記、画面のように表示されれば、Rubyがインストールされています。 続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。 最新の状態であれば、下記のように表示されます。 最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。 SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、 ウィンドウは閉じずにいてください。 ● SassとCompassインストール そういえば、ここまで何の説明もなく来てしまいましたが、 SassとかSCSSとかComapssって何？という方もいるかと思いますので、 ちょっとだけ説明をします。 Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、 ミックスイン(機能テンプレートのようなもの？)や変数を扱えたりしますが、 CSSとは似て非なるものなので、
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】
こんにちは、橋本です。 今回は小ネタを１つ紹介したいと思います。 画像投稿フォームを作る際に、投稿された画像を即時表示したいなんてことありませんか？ そんなときに便利なのが、HTML５で追加されたFile API。 File APIを使えば、投稿された画像（正確には、選択されたローカルファイル）の情報を取得することができます。 では、画像投稿機能のサンプルを元に、File APIの使い方を見て行きましょう。 File API自体はjQueryと何の関係もありませんが、いろいろと面倒なので今回もjQueryを使っています。 サンプル <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js" type="text/jav
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（前編）
こんにちは、橋本です。 今回と次回の２回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g
jQueryで簡単にドラッグ＆ドロップのソートを実装する方法
読む：3分 試す：15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQuery UIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ？」 心配ご無用！jQueryさんはやってくれます！！ まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ （24/7/19時点で ver 1.7.2） http://jqueryui.com/download （24/7/19時点で ver 1.8.21） ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
『事例で学ぶHTML5スマフォアプリ開発ポイント（基礎編・活用編）』 開催レポート
アシアルの塚田です。 昨日、7月3日（火）に開催しました「事例で学ぶHTML5スマフォアプリ開発ポイント（基礎編・活用編）」について簡単に報告させていただきたいと思います。 なお本セミナーには約100名の方々にご来場いただき、HTML5を使ったスマフォアプリ開発への関心の高さを実感いたしました。ご興味・関心をいただいた皆様に、心より感謝申し上げたいと思います。 第１部「いまさら聞けない！HTML5超入門」 講師：アシアル株式会社 教育マネージャー 海原才人 海原からは、今現在HTML5が注目されている背景と、今後の展望についてお話しさせていただきました。後半では、HTML5の具体的な機能について事例を交えながら紹介させてもらいました。
続・イラストでわかるgit入門の入門：ブランチを切る
こんにちは！志田です。 最近ドラクエモンスターズを購入しました。 だいあくまの書・シュプリンガー・メッサーラのパーティでがんがんいってます。 配合を繰り返していると、「この組み合わせ、AにもBにもなるのに！どっちが強くなるんだろう？」ということがたびたび起こります。 そんなときに使えたらいいのが、今回ご説明するブランチです。 前回のあらすじ 前回の記事では、バージョン管理と基本的な動作について、ご説明しました。 ・バージョン管理にgitを使おう！ ・コミットを繰り返し、キリのいいところでプッシュする ・コミットを重ねることでバージョン管理ができる こんな経験ありませんか みなさん、これまでの経験で、こんな経験ってありませんか？ ・直すことによる影響範囲が広いため、もしきちんと改修できて、テストもできたら安定バージョンに含めたい 今まで何度もコミット・プッシュを重ねてきたプロジェクト。現在は
gitで始めるバージョン管理
こんにちは、斉藤です。 皆様はソースコードの管理（バージョン管理）をどのようにしてますか？ 今回は"git"(ギット)という、バージョン管理システムについて、ご紹介をします。 * バージョン管理って？ 例えば、ソースコード中に昔のコードをコメントアウトをして、残しておく。 あるいは、xxx.php.bakみたいに、昔のコードを取っておく。 そんな開発方法をやったことはありませんか？ この方法をしていると、後で見返したときに、これなんだっけ？ってことになってしまいがちです。 消すべきかどうか分からないコード、ファイルが残っているって状況は、あまり気分的に良くないですよね。 これを解決できる方法が、gitなどのバージョン管理システムです。 ソースコードの編集履歴（バージョン）を記録することによって、特定の開発履歴に戻る、最新のソースコードと比較する、といったことが可能です。 バージョン管理の良
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
こんにちは、橋本です。 今日は備忘録がてら、CSS3のアニメーションについてまとめていきたいと思います。 iOS端末でFlashが動作しないことから、今後CSS3でアニメーションを実装する場面は増えてくると思います。 そんなときにこの記事を参考にしてもらえると幸いです。 今回の記事に記載されているサンプルですが、Safari、もしくはChromeで動作するようになっています。 IE、Firefox、Operaなどの他のブラウザは対象外です。 （なぜなら、ベンダプレフィックスを書くのがめんどくさかったからです。） 早速ですが、CSS3でアニメーションを実装するためには、以下の２つの方法があります。 1. transitionプロパティでアニメーションを定義する 2. animationプロパティでアニメーションを定義する また、アニメーションを定義する際には、通常のプロパティに加えてtran
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた
こんにちは、橋本です。 早いもので、2010年も残すところあと10日。 アシアルの営業日は残すところあと２日です。 こんな忙しいときにブログ当番が回ってきて、目がまわりそうなのですが、 弱音を吐いていても仕方ないので、さくっとブログ書いちゃおうと思います。 さて、今日はiPhoneのwebアプリを作成する際にで使えそうな機能について、 使い方を簡単にまとめていきたいと思います。 内容もコードも簡潔に。師走なので。 1. 位置情報の取得 iPhoneのsafariから位置情報を取得するときには、GeoLocationAPIを使用します。 サンプルコードを以下に <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>location sample</title> <script type="text/java
Apacheのアクセスログにユーザ情報を追加する
# combinedのLogFormatに、%{ADMIN_ID}e を追加 LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" \"%{ADMIN_ID}e\"" idcombined CustomLog "logs/access_log" idcombined と、たったこれだけで、access_logに任意の値を追加することができます。 symfonyでのプロジェクトでは、共通アクションのpreExecute内でapache_setenvしてあげるだけですね。 ■Cookieの値をログに出力 ちなみに、わざわざapache_setenvしたくないという場合には、Cookieの値をログを出力することもできます。 たとえば、cookieにADMIN_IDという値を仕込んだ場合は、 以下のフォーマッ
OpenFlashChart2で日本語をちゃんと表示するパッチ
こんにちは、熊谷です。 前回はOpenFlashChart2を使ってグラフ表示ということで書きましたが、このOpenFlashChart2は一部機能が日本語表示に対応していないため使えない機能があります。 その機能とはX軸のラベルを回転させる機能です。長いラベル名を複数用いたり項目が多い場合などX軸のラベルが重なり合いとても見にくい状態になります。 こんなときこのラベルに角度をつけることにより、ラベル同士が重なり合うことを防ぐことができ見やすいグラフを生成することが可能になるのですが、OpenFlashChart2では日本語に対応していないため日本語のラベルでこの機能を使うと、 このようにラベルが表示されなくなってしまいます。 そんなことでこれに対応するためのパッチを書きました。 --- elements/axis/XAxisLabels.as.orig 2010-06-28 17:4
システムの品質向上のお供に使えるツール達
こんにちは、中川です。 今回は、私が普段の開発で使っているツールを紹介したいと思います。 と言いましても、開発中というよりは、開発後半・テスト段階などでの品質向上に役立つことが多いと思われるツール達を取り上げてみました。 Firebug ・https://addons.mozilla.org/ja/firefox/addon/1843/ ・Firefoxアドオン。 ・JavaScriptのパフォーマンスチェックや、エラーチェック。ファイル・ページの読み込み時間チェックに。 ・開発初期から大活躍ですね。 HTML Validator ・https://addons.mozilla.org/ja/firefox/addon/249/ ・Firefoxアドオン。 ・HTMLの妥当性チェック。HTMLが汚いと保守フェーズに影響大ですね。 ・あまり最初は気にせず、最後のほうで一気にチェックしつつ直し
E4Xのまとめ-その２-
こんにちは。Flex大好き橋本です。 今回は、前回の「E4Xのまとめ-その１-」の続きということで、子孫ノードへのアクセス、値のフィルタリング、名前空間の利用についてまとめていきたいと思います。 ・子孫ノードへのアクセス。 「..」を使って、子孫ノードにアクセスすることができます。 //例 var xml:XML = <root> <hoge>hoge1</hoge> <fuga> <hoge>hoge2</hoge> </fuga> </root>; //前回あったとおり、「.」を使うと、直接の子ノードを取得することができます。 var a:XMLList = xml.hoge; for each (var b:XML in a) { trace(b); //hoge1 } //「..」を使うと、「.」とは異なり、直接の子ノードだけではなく、すべての子孫ノードを取得することができます。
開発用のデータベース構築まとめてきなメモCentOS5.4＋PostgreSQL8.3
開発用のデータベースをローカル環境内に構築する機会があったのでメモを残しておきます。 VMware Player3＋CentOS5.4＋PostgreSQL8.3 VMware Player3は以下のサイトからDLしてください。 http://www.vmware.com/jp/products/player/ centOSのイメージは以下からDLしてください。 http://ftp.riken.jp/Linux/centos/5/isos/i386/ ●OSインストール VMware Player3（以下VM）をインストール後VMを起動します。 １．新規仮想マシンの作成を選択 ２．インストーラディスクイメージファイルを選択し、ダウンロードしたISOファイルを選択します。 ３．仮想マシン名と格納場所は適時変更してください。 今回はデフォルトのまま進めます。 ４．ディスク容量の指定 推奨サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
