Onsen UIとjQueryを組み合わせてスマートフォンWebサイト/ハイブリッドアプリを作ろう
Onsen UIはHTML5モバイルアプリを高速化し、かつネイティブアプリのようなUIを提供するフレームワークになっています。技術的にはカスタムエレメントとAngularJSを使って作られていますが、その利用に際してAngularJSの習得が必須という訳ではありません。現在のOnsen UIはAngularJS以外の様々なJavaScriptフレームワークと組み合わせて使えるようになっています。 今回はWeb開発で最も使われているであろうjQueryを使ってOnsen UIの操作を説明したいと思います。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-ap
PDOにてMaster&Slaveのコネクションを操作するクラス(PHP)
CREATE TABLE `test_table` ( `id` int(11) NOT NULL DEFAULT '0', `name` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ); <?php require_once('./pdo_database.php'); $pdo_db = new PdoDatabase(); $sql = 'INSERT INTO test_table values("1", "Sasagame Hiroshi")'; $rec = $pdo_db->exec($sql); $sql = 'INSERT INTO test_table values("2", "Sasagame Hiroshi")'; $rec = $pdo_db->exec($sql); var_dump($pdo_db->isMast
PHPからChromeにログ出力「Chrome Logger」
こんにちは、中川です。 PHPでの開発中のちょっとしたデバッグに、echo や var_dumpで画面に値を出力して確認することがありますよね。 このデバッグ方法は簡単でいいのですが、出力した配列の値などはパッと見で確認しやすいとは言えませんし、画面の表示内容が崩れたりします。 画面に出力しない方法としては、 error_log関数を使ってapacheログやファイルに出力する方法もありますが、 この場合は、サーバ側にログインしてtailなどでファイル内容を確認する必要がでてきます。 そんなちょっとした問題を解決してくれるツール 「Chrome Logger」をご紹介したいと思います。 Chrome Loggerを使えば、JavaScriptのconsole.logのように、 表示画面には影響を与えないでブラウザのデベロッパコンソールにPHPから値を出力できます。 ■Chrome Logge
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
成功するPhoneGapアプリを開発するための高速化＆UXテクニック
興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし
【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18（後編）
こんにちは、橋本です。 前回にひきつづき、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 consoleオブジェクトには以下の19個(logを除くと18個)のメソッドがあります。 assert count debug dir dirxml error group groupCollapsed groupEnd info log markTimeline profile profileEnd time timeEnd timeStamp trace warn そのうち前回は、assertメソッドからgroupEndメソッドまで見て行きました。 今回はinfoメソッドからwarnメソッドまでの使い方について書いていきたいと思います。 infoメソッド console.info(messa
【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
もうアイコン画像はいらない！ 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 －
CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方
こんにちは、鴨田です。 最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。 なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。 作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。 注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。
HPのサーバのハードウェア（RAIDの状態）を監視する
森川です。 今回はハードウェアRAIDの状態をSNMPを使用して監視する方法の紹介です。 当然といえば当然ですが、ハードウェアRAIDをしている場合に、ハードディスクが壊れたことを検知できないというのは、致命的です。 それを検知する方法の紹介です。サーバは日本HPのML115 G5、OSはCentOS 5を使用しています。ハードウェアRAIDはSmartアレイ E200を使用しています。（Debianの場合に同様の方法で検知する方法はよくわかりません。。。） まずは、準備としてSNMP関連のパッケージを入れてしまいましょう。 さっそくですが、SNMPでRAIDの状態監視を行うために、ハードウェア（Smartアレイ E200）のMIBを手に入れる必要があります。 hpacucliのインストール MIBやコマンドラインからRAIDの状態を見るためのツール一式がHPからRPMとして提供されている
PHP+Kestrel+Supervisorでお手軽タスクキューイング
こんにちは、久保田です。 ウェブサービスでは、ユーザのアクションに従ってバッチ処理を行わなければならないケースがままあります。この記事では、バッチ処理の手法の一つであるタスクキューイングをPHPとKestrelとSupervisorを利用して行うやり方の導入を紹介します。 なぜなにタスクキューイング ウェブサービスでは、ユーザのアクションに従って非同期にバッチ処理を行うようなケースがよくあります。 例えばflickrのような写真を共有するウェブサービスで言えば、ユーザが写真をアップロードしたあとに非同期でその画像の複数のサムネイル生成や加工をしなければならないケースがあります。 よく見られるのは、DBにバッチ処理のためのタスクデータを入れておいて、後でcronで定期的に起動するワーカープロセスからバッチ処理を行う方法です。このやり方には、ワーカーを複数プロセスで扱いづらい、処理がリアルタイ
gitお悩み相談室
編集をそのまま残したい箇所ではnを、 編集をパーにしてよい箇所ではyをタイプします。 【Q】 addしたらdiffに何も表示されなくなりました。どうしたら良いでしょうか？ 【A】 diffに–stagedを付けましょう。コミット待ちのdiffが見れます。
JSはFashを超えるか？kinetic.jsを触ってみる。
1.canvasタグのエリアに線を引いたり、○とか、画像とかを描く 2.canvas上のマウスの位置座標を取得 3.各種イベント（マウスダウン、マウス移動など）取得 4.凹凸のある描画図形とマウスの衝突判定 5.描画図形のドラッグアンドドロップ 6.flashのようなベクターではなく、ビットマップを扱う
node.jsの開発時に役立つモジュール
こんにちは、中川です。 今回もPHPには一切触れないで、node.jsについて書いていこうと思います。 主に開発時に便利なモジュールを紹介いたします。 ■今回紹介するもの ・nvm ・node-dev ・node-inspector ■nvm ・https://github.com/creationix/nvm node.jsはまだまだ開発途上ということもあり、頻繁にバージョンアップが行われています。 現在では0.2系のstableバージョンと、0.3系の開発バージョンがあります。 複数のバージョンをインストールして、簡単に切り替えられるようにするために、 開発環境では、nvmを使っています。 セットアップは非常に簡単で、 $ git clone git://github.com/creationix/nvm.git ~/.nvm $ . ~/.nvm/nvm.sh
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
Android開発 C2DMを触ってみよう
<?php $url = 'https://www.google.com/accounts/ClientLogin'; // signupページで入力したgoogleアカウントのIDとパスワード $google_id = 'メールアドレス'; // 送信者ID $google_pwd = 'パスワード'; $header = array( 'Content-type: application/x-www-form-urlencoded', ); $post_list = array( 'accountType' => 'GOOGLE', 'Email' => $google_id, 'Passwd' => $google_pwd, 'source' => 'sample-sample', 'service' => 'ac2dm', ); $post = http_build_query($
AndroidにおけるLauncherアイコン、背景画像の作り方 - アシアルブログ
はじめまして。鴨田と申します。 年初からアシアルにてデザイナーとして働いており、 今日からブログも書くようになりました。 どうぞよろしくお願いいたします。 さて、今日はAndroidにおけるLancherアイコン制作を中心に、 お話をさせていただきたいと思います。 なぜ、この話題かというと、アシアルでは現在、 Androidアプリの制作を積極的に行っていて、 正式なプレスリリースは明日行いますが、 今日から、「ClapClap Clock」というAndroidアプリがAndroid Marketにて、 無料公開されています。 どんなアプリかというと、拍手に反応して、 現在の時刻を声で知らせてくれるという時計ユーティリティです。 興味のある方は是非インストールして頂ければと思います。 今回はそのデザインを自分が担当したので、 そのときに参考にしたデザインガイドラインを大まかに翻訳しながら、
PHPでセッション情報が作成されるタイミングを調べてみました
皆さん、こんにちは。笹亀です。 MacBookAirの発表＆発売やiPhone4の白の発売日が再々延期ということでいろいろな出来事がありました。白を待っていた自分にとっては残念なのと黒を買ってしまおうかと悩んでいます。 さて、本日は今まで何気なくセッションを使用していましたが、実際にファイルベースのセッションのやりとりでファイルが作成されるタイミングはどこなんだろう？っと疑問に思い、実際にPHPのセッションの作成されるファイルの流れについて調べてみました。 本日はその流れについてご紹介をさせていただきます。 PHPでセッションの情報の流れを調べるにはPHP本体のソースをみるのもいいですが、手軽に確認するために「session_set_save_handler」関数で調べることにします。 ※所々にデバック確認用に出力しております。 <?php function open($save_path
PHPでリフレクション
<?php // Entity/User.php namespace Entity; class User { private $name; private $gender; public function __construct($name, $gender) { $this->name = $name; $this->gender = $gender; } public function getName() { return $this->name; } private function getGender() { return $this->gender; } } 名前を保持するnameプロパティと、性別を保持するgenderプロパティを定義します。genderプロパティに対するゲッターメソッドはprivateにしてあります。 ■ ReflectionClass まずクラスの情報を抜
sshでポートフォワード
sshには言わずと知れた「ポートフォワード」という機能があります。 読んで時の如しで、sshの暗号化されたトンネルを利用し、任意のポートに来た通信を転送できます。 何がうれしいかと言うと、リモートの 5432番 をローカルの 5432 にマッピング出きる。 つまり、sshさえ繋がれば、そのサーバから見える範囲ならなんでも使える！と言うことです。 1・ローカルへリモートのポートをマッピング 例えば、二つのホスト（chiba, shiga）があるとします。 chibaに、shigaの5900ポートをフォワードする場合は以下のようになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
