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
iPhone6 PlusのPSDモックアップとAppleのフォント
みなさんお久しぶりです。 デザイナーの和田です。 一昨日、iPhone6/6Plusが発表されましたね。 大きくなったiPhone。ちょっと持ち歩くのが大変かなぁと思いつつも、Full HD（6Pluas）と聞くとやっぱり欲しくなってしまいます。 でも、仕事で作る画像が増えるのは面倒くさいなぁ…と思う今日この頃です。 ■iPhone6 PlusのPSDモックアップ さて、 今後、業務で使う機会が増えると思いPhone6 PlusのモックアップをPSDで作成しました。 こちらは公開いたしますので、ご使用になりたい方は以下のダウンロードから取得してください。 商用利用可です。 ※ 素材そのものは再配布しないでください。 ただし、実際とは違う部分も多々あると思います（現在のAppleのサイトに掲載されている画像を見て作っただけなので…）。その辺りはご了承下さい。 ダウンロード さてさて、今日はフ
Selenium WebDriverでマウス操作 & 処理待機
はじめに Selenium WebDriverを使えばブラウザを自動操作できます。WebDriverは単純なクリックから複雑なマウス操作や非同期処理の確認などもできます。最近のWebサイトやWebシステムではAjaxが多用されていたり、ドラッグ&ドロップを使用していたりと、結構複雑です。そんな場合のSelenium WebDriverの簡単な使い方をご紹介します。 「Selenium WebDriverとは？」「どうやって使うのか？」と思った方は、簡単・便利、ブラウザの自動操作！～Selenium WebDriver～をご一読下さい。 複数操作 マウスで複数の操作を一連の動きとして実行する場合、どのようにするのか、簡単にやってみます。アシアル・ホームページのトップ画面上部に、下の画像の部分があります。 この部分(スライダー)をマウスでドラッグすると、その下の構築事例や会社情報が切り替わりま
緯度・経度と測地系について
はじめに モバイル端末が増えるにつれ、Webサイトでも位置情報を扱うことがあります。例えば、現在地周辺の店舗やホテルを探すサイトなど、よく見かけませんか？今回は、そんな位置情報を使う際に知っておきたいマメ知識、「測地系」について簡単にまとめてみました。今更ながら、結構重要です。 測地系 緯度・経度を扱う際には、聞きなれない単語が出てきます。例えば、 日本測地系(Tokyo Datum, TKY) 日本測地系2000(The Japanese Geodetic Datum 2000, JGD2000) 世界測地系(World Geodetic System 1984, WGS84) などなど。これらのことを理解していないと、思わぬ落とし穴にはまってしまいます。そもそも「測地系」という言葉すら、一般的には聞きなれません。 では、測地系とは何か？ 地理や測地学に疎い人は、緯度・経度は場所によって
nginx(リバプロ)とapache(Webサーバ)でアクセス要求制御をしよう
Apacheの設定ファイルを変更します。 80番はリバプロ側で処理するためApacheではListenポートを8010に変更する nginx側の設定を変更します。 インストール後は「/opt/local/etc/nginx」に設定ファイルのサンプルがあり、 通常はこちらを参考にして設定しますが、今回は設定ファイルを下記のように設定します。 １．mimeタイプはデフォルトのものを利用します sudo mv /opt/local/etc/nginx/mime.types.default /opt/local/etc/nginx/mime.types user nobody; worker_processes 1; error_log logs/error.log info; events { worker_connections 256; } http { include
手軽にレンダリング！テンプレートエンジンTransparency
はじめに Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています テンプレートをHTMLの一部として記述（DOM構造内に記述） 属性値に基づくデータの結合（<%= foo %>や{{foo}}などは不要） 繰り返し構造の描画（ループ処理の記述不要） 一般的なJavaScriptテンプレートエンジン（Underscore.js、Mustache、jQuery Templateなど）では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。 一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダ
【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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「HTML5でiOSアプリAndroidアプリを作ろう! 〜HTML5ハイブリッドアプリ開発入門〜」話しました
http://blog.asial.co.jp/1134