成功するPhoneGapアプリを開発するための高速化＆UXテクニック
興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし
MonacaでQRコードリーダを作ってみた – JS編
こんにちは、浦本です。 昨日と今日で行われた ad:tech tokyo 2012 では、アシアルブースにてMonacaをアピールしてきました。 ブースにお立ち寄り頂いた方々、誠にありがとうございました！ イベントの模様は別途記事でご紹介できればと思います。 さて、今回はMonacaでQRコードリーダアプリを作ってみようと思います。 とはいってもQRコードを読み取るJSライブラリを利用するので簡単です。 今回作成するアプリは、まずPhoneGapを利用してカメラまたはアルバムから画像を取得し、その画像をJSライブラリに読み込ませてQRコードを解析するというものです。 JSなのでさほど速度は出ませんが、あくまでサンプルとして見て頂ければと思います。 ※MonacaではQRコード解析用のPhoneGapプラグインに対応予定ですので、今回の記事タイトルではあえて「JS編」と記載させて頂きました。
【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
JsTestDriverで簡単テスト
最近、何かとJavascriptに触れる機会が多くなってきました。クライアント側としてHTML5が注目され、サーバ側としてNode.jsが発展してきたおかげですね。その一方で、Javascriptのテストほど面倒なものはありません。特に、ブラウザ上でのテストなど自動化することが時に難しかったりします。このブラウザ上でのテストを自動化できる仕組みがJsTestDriverです。今回はJsTestDriverの導入方法と簡単な使い方をご紹介します。 JsTestDriverとは JsTestDriverはGoogleが作ったテストフレームワークです。導入も使い方もとても簡単であり、様々なブラウザを使ったテストを自動化することが出来ます。Javascriptのテストフレームワークは多数ありますが、その中でもJsTestDriverは簡単かつ正確なツールです。 JsTestDriverの導入 導入
【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
GPSの座標から住所と地図を表示する
こんにちは、サンプルアプリ開発者の山田健一です。 今回はGPSにより取得した緯度、経度から住所を求め、さらに地図を表示するサンプルについて解説します。 住所取得、地図表示、どちらも Google Maps API を利用します。 Google Maps API を利用するためには、htmlに次のコードを追加します。 Google Maps API の指定 これだけの指定でGoogle Maps API が使用できるようになりますが、sensorパラメーターは必ず指定してください。地図を表示するにあたり、GPSのよaうな位置情報を使用するか否かの指定です。今回はGPSを使用しますが、GPSを利用して地図を表z示するのではなく、GPSから取得したデータを厳選した上で、そのデータをもとに地図表示を行うため、 false を指定します。 GPSから取得したデータには誤差が含まれるため、一定時間計測
GPSアプリ作成上の注意点について
こんにちは、サンプルアプリ開発者の山田健一です。 GPSアプリはMonacaと相性がよいものの1つです。 なぜならケーブル要らずのデバッグができるからです。 「GPSアプリをデバッガーで起動して、外を歩きながら取得したGPSデータを、PCに表示させたログで確認する」という使い方が可能です。 GPS機能を利用するにはいくつかの注意点があります。 場所によっては位置を測定できないことがある 位置が測定できたとしても誤差が大きいことがある 以上の点に注意してください。 具体的には、 geolocation.getCurrentPosition メソッドは使用せず、geolocation.watchPosition メソッドを使用するようにしてください。 watchPosition メソッドを使用すると位置情報が変わるたびに指定した callback 関数が呼ばれます。 具体的なコード例は次のよう
JMeterを有効活用して精度の高い負荷テストをしよう
みなさん、こんばんは。笹亀です。 アシアルのコーポレートサイトが先日、５年ぶりくらいにリニューアル致しました！ サイトもHTML5で組み直し、全面リニューアルしております。 とてもインパクトがあるサイトになっておりますので、是非、覗いて行ってください。 http://www.asial.co.jp 本日は、JMeterについてご紹介しようと思います。 JMeterは負荷テストを行うための有名なツールですが、ヘッダー情報などの設定を自由にできることが便利です。自分がよく負荷テストをかけるときには、よくユーザ固有な情報を使った負荷テスト（例：携帯のUIDを使った操作）を考えて実施することが多いです。その手法についても一緒にご紹介させていただきます。 まずはJMeterをインストールしましょう。下記の箇所を参考にするとインストールできると思います。JMeterはインストーラーはないので、コマンド
エンジニアの英会話 〜とっさの一言〜
（いろいろな方々から指摘をいただき、記事を修正しました。ありがとうございます。 "went" -> "gone"） こんにちは、斉藤です。 弊社には、海外生まれ or 海外暮らし経験ありの方が何人か出入りしています。 今の自分の席の周りにも、英語を喋ることが可能な方が二人ほど。 自分は、つたない英語で彼らと会話していますが、何とかもっとコミュニケーションしたい。 というわけで今回は、そんな彼らに教えてもらったエンジニアならではの一言英会話をご紹介します！ Check it out! *「30分経って分からなかったら、別の問題を考えよう」 ある問題が解決できなくて、こう考えることはよくありますね。 英語ではこう言います。
使えるとちょっと便利なSSHのTIPS
こんにちは、牧野です。久々の、9か月以上ぶりのブログです。。 仕事では、ここ1年近くずっっとインフラ関係のことをやっていました。 今日は、SSHに関するTIPSを紹介します。 １. 特定のサーバーにSSHログインする時に、特定の設定を使用する ホームディレクトリ/.ssh/configファイルに設定を書いておくと、特定のサーバーにログインする時に、自動的に特定の設定を使うようにできます。 SSHのオプションをサーバーによって分けたい時に入力が楽になります。 以下は、xxx.yyy.zzz.aaaでアクセスする時に使う秘密鍵をid_rsa_testに設定しています。 .ssh/config Host xxx.yyy.zzz.aaa IdentityFile /home/asial/.ssh/id_rsa_test ２. ホストキーをチェックしないようにする LinuxからサーバーにSSH接続
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
PhoneGapアプリ開発のちょっとしたコツ
PhoneGapはスマートフォンにてハイブリッドアプリケーションを作成するためのフレームワークです。この記事では、PhoneGapによりワンソース・マルチユース（クロスプラットフォーム）なアプリを開発するためのコツをご紹介します。 従来まで、スマートフォンアプリの開発形態は、 ・ネイティブアプリ ・Webアプリ に大別されていました。ネイティブアプリでは端末の機能を全て活用できる一方で、クロスプラットフォーム性がありません（iOSとAndroidで別々に実装）。他方、WebアプリではWebViewを使ったり、ブラウザを使用することで、HTML5などの機能を使用します。これにより、クロスプラットフォーム性が担保されています。一方で、ネイティブ機能を利用できない、などの制約も発生していました。 PhoneGapを使用したハイブリッドアプリは、上記の２つの手法の間に存在し、次の特徴を持っています
携帯端末向けSSL証明書を発行するサービス「SSLモバイル」
先日、携帯端末向けにSSL証明書を発行するサービス『SSLモバイル』をリリースしました。 「SSLモバイル」は、ジオトラスト社が発行する、国内の携帯電話に対応したSSL証明書です。ドコモ、au、ソフトバンク社の携帯端末以外にも、ウィルコムやイーモバイル、iPhone、Google Androidなどのスマートフォン端末にも対応しています。 お求めやすい価格で、技術サポートや再発行手数料無料など、高品質で安全なシステムの構築にご利用頂けます。 以下、アシアル株式会社が提供する、SSLモバイル証明書の特徴になります。 ・主要３キャリアの携帯端末に対応 ・弊社スタッフによる、日本での購入、技術サポート ・ほぼすべてのPCブラウザにも対応 ・ジオトラスト社により発行される、信頼性の高いシングル・ルート証明書を使用 ・7日間の完全返金保証やSSL証明書の再発行など高品質なアフターサポート 【料金】
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
PHP5.4 alpha1リリース! PHP5.3からの新機能を見わたす
PHP NEWS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 20 Jun 2011, PHP 5.4.0 Alpha 1 - autoconf2.59以上が ./buildconf によるconfigureスクリプトの生成のために サポート(そして要求)されるようになった。configureスクリプトのhelpの順番が おかしくなるかもしれないのを避けるために、autoconf2.60以上が望ましい。 (Rasmus, Chris Jones) - 古い機能の削除: . break/continue $var 文法。 (Dmitry)
jQuery Mobileを試してみました
初めまして。4月からアシアルに入社した志田と申します。 大学院時代は、グループウェアと呼ばれる複数人で知識共有するシステムをメインに研究・開発を行ってきました。 みなさん、どうぞよろしくお願いいたします。 さて、今回はjQuery Mobileを使って簡単なブログページを作ってみたいと思います。 今回は、手元にAndroid端末であるIS03があるので、IS03の標準ブラウザで表示しながら説明していきます。 ブログ記入画面 まず、ブログ記入画面を作ってみます。 ここがトップで、リストをクリックすると ページ内の各ページにジャンプします。 このトップページから各ページは、実は1つのHTMLファイルの中にすべて書かれています。 別ページのように見えていますが、ページ内リンクで実現しています。 各ページを表しているのが、divタグにつけられた data-role="page" というクラスです。
GIF画像から情報を抜き取るチュートリアル PHPでバイナリプログラミングその3
こんにちは、久保田です。 これまでの記事では、PHPでバイナリを扱うための基本的な事柄を扱ってきました。第一回では、PHPではバイナリをどのように扱えばいいのか、第二回では、そもそもバイナリの反対のテキストとは何か、ということについて記述しました。今回の記事では、例として実際にPHPでGIF画像をどのように解釈していくかを解説します。 バイナリを扱うコードを書く際の手順 ではGIF画像をPHPで扱う前に、まずは一般的にバイナリを扱うコードを書く際の手順の例を以下に大雑把に示します。 1. フォーマットに関する資料を集める 2. 資料からフォーマットを理解する 3. プログラミング言語で実際に扱ってみる バイナリファイルはその種類によって各々が違ったフォーマットを持っています。GIF画像とPNG画像にしても同じ画像ですが、当然ながら内部のフォーマットは全く違います。従って、自分がこれから扱い
スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ
こんにちは、鴨田です。 最近、スマートフォン関連の仕事が多いのですが、 スマートフォン絡みのデザインをするときに、 この画像はどんなサイズだったっけ、 っていうことが多いので、まとめておきたいと思います。 ■画面サイズ[画面解像度](単位：px) iPhone3G / 3GS 320×480 iPhone4 640×960 iPad / iPad 2 768×1024 HT-03A 320×480 Xperia (SO-01B) / Xperia arc (SO-01C) 480×854 HTC Desire (X06HT) 480×800 Nexus One 480×800 Galaxy S 480×800 IS03 640×960 Galaxy Tab 600×1024 主要な機種だけ載せておきます。 AndroidはWide対応が主流ですね。 ■Lancherアイコンサイズ(単位：p
jQueryで作るヘルプページ
こんにちは。笹亀です。 最近、工事中であった周りの建物の完成が近くなってきており、 周りの景色がいままでと違う景色に変わってしまいなんだか少し寂しさを感じております。 2/24(明日)に噂によると新MacBookProの発表があるということらしく、 こちらは発表までとても待ちどうしくてしかたありません！ さて本日はjQueryのライブラリでヘルプページを作成する方法をご紹介致します。 ヘルプページをいちから作成するというのは手間と労力がとても掛かってしまうものです。 今回ご紹介するライブラリを使用すると下記の画像のようにWebシステム内にヘルプ情報を簡単に組み込めてとても手軽にヘルプページを作成することができます。 それでは実際にヘルプページを作成してみたいと思います。 １．まずは実装に必要なjQueryとヘルプライブラリのJSをダウンロードします 下記からダウンロード可能です。 http
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
