Chromeでアプリの表示サイズを変更する

User-Agent Switcher for Chromeをクリックして、ユーザーエージェントを変更した後、

右上の三本線→その他のツール→デベロッパーツールと順にクリックして、

下にデベロッパーツールが表示されたら、

グレーのバーにあるスマホのアイコンをクリックします。

クリック後に上記のようにグリットが表示されたら、各スマホのデザインを確認できます。

左上にあるDeviceから確認したいスマホのタイプを選ぶと

確認したいスマホでのデザインを確認できます。下のディベロッパーツールが邪魔な場合は

グレーのバーの右側にある赤で囲ったアイコンをクリックすると

ディベロッパーツールを別ウィンドウとして切り離すことができます。

Chromeでスマホで開いた時と同じように表示する方法(エミュレータ)

PCで開発したアプリがスマホで表示したらどのように表示されるのか気になることが多々あります。毎回スマホにデプロイして表示確認を行うことは大変です。PCでスマホのように表示する設定にすれば常にスマホの表示で開発を進めることができる様になるので、今回はChromeの機能と拡張機能を組み合わせてスマホの様に表示させる方法(エミュレータ)を紹介します。

始めにユーザーエージェントを操作できるUser-Agent Switcher for Chromeという拡張機能をインストールします。ユーザーエージェントとはどのOSのどのブラウザでアプリを開いたかという情報のことで、Windows 8のChromeで開いているといった情報のことを指し、コードの書き方によっては、PCで開いたか？スマホで開いたなら、大きめのスマホか、タブレットか？といった情報で挙動が変えるものがあるので、スマホ用に開発していたとして、アプリの動作確認の際にユーザーエージェントをPCで開いていたら、想定している操作がまったく確認できないということがあります。

始めにGoogle Chromeを開いて、新しいタブを開きます。

新しいタブを開いたら、左上にあるAppsをクリックし

ストアを開きます。

Chromeウェブストアが表示されたら、左上の検索フォームにUser-Agent Switcher for Chromeと入力して検索、結果が表示されたら拡張機能のところにあるUser-Agent Switcher for Chromeの+無料をクリックしてインストールします。

インストールできたら、右上のアドレスバー横にアイコンが追加されています。この拡張機能を使ってユーザーエージェントを変更してみます。まずは追加されたアカウントをクリックしてみると、

ブラウザ(ChromeやInternet Explorer)やスマホ用のOS(iOSやAndroid)が表示されます。今回はAndroidのスマホのChromeの表示の確認だとして、

Androidをクリックして、

Android 4.1を選びます。選択終了後にアイコンにANDのマークが表示されます。これでユーザーエージェントの変更ができました。次は画面の表示サイズを見ていきましょう。

Chrome Dev Editorでスマホ用のアプリを開発しよう

※今回の内容はChromebookとAndroidの組み合わせのみ確認済み

Chrome Dev Editorでは、HTMLとJavaScriptで開発してスマホで動かせるハイブリットアプリ※1を開発することができます。開発するに当たってPCにはChrome Dev Editorを、スマホにはChrome App Developer Toolをインストールしておく必要があります。

始めに用語の整理ですが、スマホで動かすアプリは、ネイティブアプリ、Webアプリとハイブリットアプリの三つに分けることができます。ネイティブアプリはスマホのアプリ開発用の言語を利用して、インターネットに接続していなくても動かすことができるアプリで、AndroidではJava、iOSではObjective-Cを使って開発します。WebアプリはHTMLやJavaScriptで開発したコードをサーバにあげて、Webサイトの一つとしてブラウザを介して実行するアプリです。ハイブリットアプリはWebアプリの手法で開発したコードをCordovaというフレームワークを利用してネイティブアプリ化して実行するアプリです。
Apache Cordova

それではネイティブアプリの開発の準備をしていきましょう。始めにスマホで下記のURLを開き、Chrome App Developer Toolをダウンロードしましょう。
Chrome App Developer Tool for Mobile

ダウンロードをする時は最新版を選び、ChromeAppDeveloperTool-debug.apkをクリックしてダウンロードとインストールを開始します。

ダウンロードできたら、スマホのアプリ一覧に上記のアイコンが表示されるのでクリックをしてみて、

この画面が表示されたら、インストールは完了です。インストール後、Androidのスマホを開発者モードにする必要があり、このモードにするには、設定→端末管理→端末情報へ移動後、最下部にある「ビルド番号」を連続タップして「これでデベロッパーになりました！」が表示されたら終了です。
次はChrome Dev Editorでスマホ用のprojectを作成します。
(Windowsではこの後にPC側にインストールするものがあるらしいが、今のところ把握していません)

New Projectを選んで、Project typeでJavaScript Chrome Appを選択してプロジェクトを作成します。

プロジェクトが作成できたら、プロジェクト名にカーソルを合わせて右クリックをクリックし、Deploy to Mobile…をクリックします。

Deploy to Mobileの画面が表示されたら、Deploy to a network host with this IP:を選択し、

AndroidのスマホにインストールしたChrome App Developer Toolに表示された数字の羅列の値をフォームに入力します。この時、:(コロン)の前までの数字を入力します。
(10.116.222.206:2424の場合は、10.116.222.206まで)

入力後にDEPLOYをクリックして、スマホ側で

プロジェクト内のindex.htmlのコードが実行・表示されれば、ハイブリットアプリの開発環境の作成は終了です。index.htmlとmain.jsにコードを書いて、作成したいアプリの開発をしましょう。

Chrome Dev Editorの設定

Chrome AppsにあるChrome Dev Editorを開くと、

このような画面が表示されます。

右上にある三本線のボタンをクリックすると、メニューが表示されます。メニューが表示されたら、New Projectをクリックします。
（すでに開発中のコードがある場合はOpen Folderを選択してください。）

この画面が表示されたら、CHOOSE FOLDER(フォルダを選択)をクリックします。

フォルダーの参照が表示されたら、開発用に用意したフォルダを選択してOKをクリックします。

この画面が表示されたら、Blank Projectを選択します。もし、Webアプリ(Webサイト)を作成したい場合は、JavaScript web appを選択、スマホアプリを作成したい場合は、JavaScript Chrome Appを選択しましょう。今回はどちらも開発できるBlank projectを選択します。
（※プロジェクト名はわかりやすい名前を付けましょう）

画面の左端にprojectの作成の時に入力した名前が表示されていれば、開発を始めることができます。

まずはプロジェクト名を右クリックして、New File...を開きます。

New file nameにindex.htmlと入力して、CREATEボタンをクリックします。

ファイルが生成できたら、コードを書き始めましょう。

ある程度、コードがかけて動作確認を行いたい場合は、

左上にある▶(run)ボタンをクリックします。

このように表示されれば良いです。作成したindex.htmlにコードを書いてアプリを作成していきましょう。

Chrome Dev Editorのインストール

Chrome Dev Editor(CDE)はGoogle Chromeというブラウザ上でアプリの開発ができるメモ帳(エディタ)です。JavaScriptでそのままアプリを書くのはもちろん、書いたコードをスマートフォンアプリ用に自動で書き換えてくれたりします。 （※CDEを使うには、Googleのアカウントが必要です）

始めにGoogle Chromeを開いて、新しいタブを開きます。

新しいタブを開いたら、左上にあるApps(もしくはアプリ)をクリックし、

ストアを開きます。

Chromeウェブストアを開いたら、①のフォームにChrome Dev Editorと入力すると、右側にChrome Dev Editorが表示されます。表示されたら、＋無料をクリックしてインストールします。

インストール後にAppsを開くと、Chrome Dev Editorが追加されています。インストールはこれで終わりです。

動画ファイルをJavaScriptで実行する

JavaScriptで動画ファイルを取得できるように<video>にid属性を付与します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<video id="videosample">
    <source src="movie/movie1.mp4">
</video>
</body>
</html>

idを付与したら、JavaScriptのコードを書いていきます。今回はボタンを設置して、onclickで関数を実行にしましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script>

//動画を再生する
function execute(){
    var video = document.querySelector("#videosample");
    video.play();
}

</script>
</head>
<body>
<video id="videosample">
    <source src="movie/movie1.mp4">
</video>
<input type="button" value="実行" onclick="execute();">
</body>
</html>

document.querySelector()でvideoタグを取得して、video.play();と書くことで、<video>タグで指定した動画ファイルを実行することができます。

※動画ファイルを停止する時は、video.pause();を使います。

動画ファイルをHTMLの再生ボタンで実行する

<audio>タグと同様で<video>タグにcontrolsを追加すると、再生ボタンが追加されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<video controls>
    <source src="movie/movie1.mp4">
</video>
</body>
</html>

srcのファイルの位置の指定に間違いがなければ、

動画の下に再生ボタンが表示され、▶ボタンを押すことで動画が再生されます。

画像の引用
NHK CREATIVE LIBRARY