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風タブバーとアイコンを作成する方法
最近話題になっていたこちらのサイトがとても便利です。 Fontello – http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭文字を取るとか、abc～とかにするとかですかね。 文字列の指定が終わったら、フォントファイルのダウンロードを行います。 サイト右上にある「Download webfont(n)」をクリックしましょう。 「fontello-xxxxxxxx.zip」がダウンロードされます。 解凍して中身を見てみましょう。 fontello －cssフォルダ －icons.css －icons-codes.css －icons-ie7.css －
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
『事例で学ぶHTML5スマフォアプリ開発ポイント（基礎編・活用編）』 開催レポート
第2部 「開発事例に学ぶHTML5のポイント」 講師：アシアル株式会社 代表取締役 田中正裕 田中からは、弊社の構築事例を題材にHTML5でのシステム開発のポイントを解説させてもらいました。前半は、先月にHTML5ベースにリニューアルしたアシアルのWebサイトを事例として、PC向けのHTML5活用のポイントを紹介しました。後半では、「auoneニュースEX」や名刺管理ソフト「Eight」といったアプリを題材に、ハイブリッドアプリ開発のノウハウを紹介しました。 ご来場いただいた方々からは下記の様な感想・要望をいただきました。 「初心者にもわかる基本的な内容で既知の情報が多かったが、再確認できてよかった。」 「実例に沿っていたため、HTML5でのアプリ開発のイメージがわいた。」 「実際に苦労した話が聞けてよかったが、開発経験がないと共感しにくいかもしれない。」 「実際のコーディングに沿って進め
続・イラストでわかるgit入門の入門：ブランチを切る
drwxr-xr-x 3 masatoshi staff 102 6 13 18:29 . drwx------+ 17 masatoshi staff 578 6 13 18:28 .. drwxr-xr-x 10 masatoshi staff 340 6 13 18:29 .git
gitで始めるバージョン管理
・開発履歴を残すことにより、開発履歴を呼び出す、比較できる ・編集履歴はバージョン管理システムの中に保存されるので、開発用のコメントアウトや.bakファイルが残る、といったことを回避できる ・最新の編集履歴と比較することで、今現在、ファイルが編集されている状態かどうかが分かる * git って？ 先日のblogでも、紹介されていますね！ 非エンジニア出身の新米Webディレクターが覚えておくべき10の用語 その２ 分散型リポジトリのバージョン管理システムです。 “分散型リポジトリのバージョン管理”という語句の説明を簡単にすると、 ・サーバ上にソースコードのマスター（中央リポジトリ）がある ・開発者はそれをコピーして、自分だけの環境下（ローカルリポジトリ）で開発を行う ・ローカルリポジトリでの編集が終わったら、その差分を中央リポジトリに送る ・他の開発者は中央リポジトリから、その差分を持ってき
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
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アプリを作成する際にで使えそうな機能について簡単にまとめてみた
【師走なので、簡潔に】iPhoneのwebアプリを作成する際にで使えそうな機能について簡単にまとめてみた <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>location sample</title> <script type="text/javascript"> <!-- function init() { // 位置情報の取得 navigator.geolocation.getCurrentPosition(success, failed); } function success(position) { alert('今の位置は、緯度:' + position.coords.latitude + '、軽度:' + position.coords.longitude + 'だよ！'); } fun
Apacheのアクセスログにユーザ情報を追加する
こんにちは、中川です。 日々の運用をしていると、サービス運用の担当者から「管理画面で、あの操作はだれがやったか調べられませんか？」なんて質問を受けることがあります。 しっかりと操作ログをとるようなシステム要件でないとApacheのログを追うしかありませんが、通常はIPアドレスやブラウザ程度しか調べようがありませんよね。。。 しかし、初期開発であらゆる操作ログをしっかりシステムに組み込む余裕なんてないという場合もあります。そんな時のために事前にやっておくとちょっと便利で、非常に簡単なTIPSを。 ————————————————- ■追記 dandaso様 よりコメントいただきました。 確かにApacheへのログ用途ですので、apache_noteを利用するのが適切ですね。 dandaso様ご指摘ありがとうございます。 apache_noteを利用した場合の例も追加させていただきます。 ■a
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
8.8.8.8はGoogleが提供しているDNSになります。 セカンダリーは8.8.4.4です。 Google Public DNS http://code.google.com/intl/ja/speed/public-dns/ Google Public DNSの特徴としては速度とDNSキャッシュスプーフィング攻撃に強いことらしいです。 また、接続情報は２４時間後に削除されるそうです。 ３．VMの設定 IPアドレスを固定にしましたので、次はVMのブリッチ接続を設定します。 右下のアイコンをクリックし、仮想マシン設定を開きます。 仮想マシン設定から、ネットワーク接続「ブリッジ：物理ネットワークに直接接続」のラジオボタンを選択し、OKをクリックします ネットワーク設定はこれで終わりです。 ここから先はターミナルを使用して設定します。 ●centの初期設定 １．yumの設定 fastestm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「データバインディングによるインタラクティブなUIの効率的な表現」Build Insider OFFLINEで登壇しました