作成者別アーカイブ: kenarai7

リアルタイム・バックエンドサービス「Firebase」を使ったWebアプリ作成

| 2件の返信

Firebaseは、チャットのようなリアルタイム性の高いアプリを作る際に、端末とサーバー間、端末同士でのデータ同期などのバックエンドで行う処理をAPI提供してくれる便利なバックエンドサービスです。用途としては、複数人でのリアルタイムコミュニケーションアプリやモバイルアプリのオフライン対応などが多いそうです。

まずは試しにということで、Firebaseを使ってグループテキストチャットのサンプルを作成してみましたので、Firebaseの使い方についてご紹介したいと思います。

続きを読む

DockerFileでDockerイメージを作成してみる

| コメントをどうぞ

アプリケーションの動作環境をコンテナ化するために、ベースとなるubuntuやcentosのイメージに必要なアプリケーションを一つずつ手動でインストールして作成していく方法もありますが、インストール手順を記述したDockerFileを使って作成する方法もあります。
インストール手順をDockerFileでスクリプト化しておくことで再利用性も高まります。
今回はDockerFileによりinfoScoopを稼働させるサーバーのイメージを作成し、コンテナを起動するところまでの手順をご紹介したいと思います。

Dockerのインストール

DockerはLinuxで動作しますので、Linuxマシンを用意します。
今回はubuntuを用意したのでapt-getでDockerをインストールします。

sudo apt-get install docker.io

続きを読む

Google Apps Script でガジェットを作成してみる

| コメントをどうぞ

前回に引き続きGoogle Apps Script活用のお話ですが、今回はGoogle Apps Scriptを使って簡単にガジェットを作成してみたいと思います。

Google Apps Scriptで作成したWebアプリをそのままinfoScoopにガジェットとして表示できたら便利ですが、X-Frame-OptionsというHTTPレスポンスヘッダにより他のサイトに直接表示することができないようになっています。クリックジャッキング対策のためだそうです。

x-frame-options:SAMEORIGIN

そこでJSONP(JSON with padding)の仕組みを使って、Googleカレンダーのイベントをガジェットに表示してみたいと思います。

続きを読む

Google Apps ScriptでSalesforceのイベント一覧を出力してみる

| コメントをどうぞ

前回の記事に引き続きGoogle Apps Scriptのサンプル作成ということで、今回はGoogle Apps ScriptからSalesforceのAPIを実行し、自分に関連するイベントリストをスプレッドシートに出力してみたいと思います。

続きを読む

Amazon SNSとAdobe PhoneGap Buildを利用したプッシュ通知アプリの作成

| 1件のフィードバック

BaaS(Backend as a service)の普及により、より手軽にスマートデバイス向けのアプリが開発できるようになりました。

そこで今回は、ハイブリッドアプリケーション向けのビルドサービス「Adobe PhoneGap Build」を利用してビルドしたアプリに、マルチデバイス対応の通知サービス「Amazon SNS」でプッシュ通知してみたいと思います。

続きを読む

WebRTCでビデオチャットアプリ作成

| 1件のフィードバック

WebRTCを使ったコミュニケーションアプリを作る機会があったので、今回はWebRTC関連のライブラリの使い方とサンプルアプリを紹介したいと思います。

WebRTCとは?

WebRTCはリアルタイムコミュニケーションアプリを作成するためのAPIです。具体的には以下のような機能がJavaScriptの知識さえあれば簡単に実装できます。

  • テキストチャット
  • ビデオチャット
  • ボイスチャット
  • ファイル共有
  • スクリーン共有(Chromeのみ)

続きを読む

Chromeデベロッパーツールのモバイル向けデバッグ機能について

| コメントをどうぞ

つい最近まで知りませんでしたが、バージョン33以降のChromeのデベロッパーツールにモバイル向けのデバッグ機能として搭載された「エミュレーション機能」と「リモートデバッギング機能」が便利だったので紹介したいと思います。

エミュレーション機能

デベロッパーツールの起動

デバッグしたいページを開いた状態で、Ctrl+Shift+i(Macの場合はCommand+Option+i)を押して、デベロッパーツールを開きます。
show-devtools
続きを読む

モバイル向けWebページのデバッグについて

| コメントをどうぞ

スマートフォンやタブレットにもSafari、 Android Browser(Android 標準ブラウザ)、Chorme、IE、FireFoxなどたくさんのブラウザがあります。作成するWebページをそれらのブラウザに対応させるとなると、ブラウザ間でのCSSの動作や表示の違いを修正するために何かと実機でのデバッグ作業が必要な場合がでてくるかと思います。しかし、実際にiOSのSafariでデバッグするのにMacを利用できる環境でなかったり、デバッグツールがないAndroid Browserでデバッグしたい場合などがあると思います。そのような場合には「weinre」というリモートデバッグツールが有用かと思います。
weinreを利用することにより、 Chromeを使ってデバイス上のWebページのリモードデバッグが可能になります。

weinreのセットアップ手順

1.node.jsのインストール

以下のサイトからnode.jsのインストーラをダウンロードしてインストールします。
http://nodejs.jp/nodejs.org_ja/

2.weinreのインストール

npmを使用してweinreをインストールします。

npm install weinre

nodo_modules以下にweinreディレクトリが作成されればインストール成功です。

デバッグの準備

1.weinreの起動

以下のコマンドを実行しweinreを起動します。

./node_modules/weinre/weinre

起動オプションについての詳細は以下のページをご参照ください。

http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html

2.スクリプトの埋め込み

デバッグしたいページに以下のスクリプトを埋め込みます。

<script src="[ホスト名]:8080/target/target-script-min.js#dev1"></script>
  • ホスト名にはweinreが起動しているPCのホスト名、IPアドレスを指定します。
  • #以降は任意の文字列を指定します。

3.デバッグコンソールの起動

Chromeで以下のURLを開きます。

http://localhost:8080/client/#dev1
  • #以降は2で指定した文字列と同じものを指定します。

weinre-console-1

デバッグ

実機で先ほどのスクリプトを埋め込んだWebページを開き、コンソール画面を見ると以下のようにターゲットに追加されます。URLが緑色になっていればデバッグ可能な状態です。
target-list

では、実際にコンソールを操作してみます。
Consoleボタンを選択し、コンソールを開き以下のスクリプトを実行してみると実機の情報が出力されます。

console.log(window.navigator.userAgent);

debug-js

Elementsタブを開けばCSSもデバッグできます。サポートしていないCSSのクラスやプロパティを指定しようすると警告表示となります。
debug-css

おわりに

以上のように、weinreを利用することで、PCから各デバイスのブラウザ上のWebページをデバッグすることができます。
専用のデバッグツールほど高機能ではありませんが、手っ取り早くCSSのサポート状態を確認したり、作成したCSSの動作確認をする時などに利用できるのではないかと思います。
また、クラウド上の検証サービスで実機をレンタルしてリモートデバッグしたり、ハイブリッドアプリケーションのデバッグも可能かと思います。

モバイル向けWebページでiFrameを使用する際のスクロール問題

| 5件の返信

infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。

 

サポートブラウザ

今回サポート対象となったブラウザ(OS)は以下になります。

  • Safari(iOS)
  • Android Browser(Android)
  • IE(Windowsタブレット)

 

DOCTYPE宣言

HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。

<!DOCTYPE HTML>

現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。
また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。
なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。

 

iOSのiFrameにおけるスクロール問題

iFrameにコンテンツを表示するために、以下のようにHTMLを記述してブラウザで表示してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm {
      width:300px;
      height: 250px;
      border:none;
    }
  </style>
</head>
<body>
  <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
</body>
</html>

Android BrowserとIEでは問題ありませんでしたが、

IE(Windowsタブレット)の場合

IE(Windowsタブレット)の場合

iOS Safariで表示してみると、コンテンツのサイズに合わせてiFrameがのびてしまいました。PC向けのサイトだと以下のように画面一杯に広がってしまいます。

iframe-safari-err


iOS Safariの場合

 

どうやらiOS Safariではiframeのscrolling属性が”auto”、もしく”yes”の場合、指定したサイズが効かないらしく、他の方のブログを参考にさせて頂いてiframeの直上にスクロール要素を用意する方法が有効である、ということが分かりました。
エージェントで判別してiOS Safariの場合だけ直上にスクロール要素を用意する方法も考えましたが、
煩雑になると思いCSSで対応することにしました。

以下のように記述し、実機で確認してみたところ、

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">  
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    .ifrm {
      width:100%;
      height:100%;
      border:none;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
</body>
</html>

SafariではiFrameの高さも固定され問題なくスクロールできるようになりましたが、
今度はAndroid BrowserとIEで2重にスクロールバーが表示されるようになってしまいました。

2重スクロール(IEの場合)

2重スクロール(IEの場合)

 

2重スクロールへの対処

どうやらiframeの高さがうまく調整できていないのが原因のようです。
iframeの下に余白が発生してしまっています。

試行錯誤の後、iframe要素に明示的に「display:block;」を指定することで回避できました。
理由はよく分かりません、デフォルトの表示形式が「inline-block」だとしても高さ調整は可能なはず…
対処するのに半日ほど掛かってしまいました…。
最終的に作成できたHTMLは以下になります。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <style type="text/css">
    .ifrm-container {
      width:300px;
      height:250px;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      display: inline-block;
      margin: 10px;
    }

    .ifrm {
      width:100%;
      height:100%;
      border:none;
      display:block;
    }
  </style>
</head>
<body>
  <div class="ifrm-container">
    <iframe class="ifrm" scrolling="auto" src="http://www.infoscoop.org"></iframe>
  </div>
  <div class="ifrm-container">
    < iframe class="ifrm" scrolling="auto" src="http://jquery.com/"></iframe>
  </div>
</body>
</html>