Symfoware

Symfowareについての考察blog

Ubuntu 18.04 に Android Studio をインストール

過去記事のこちらを参考にしました。
Ubuntu 16.04 に Android Studio をインストール


Javaのインストール



以下のコマンドでopenjdkをインストール。


$ sudo apt install openjdk-11-jdk







Android Studioのインストール



https://developer.android.com/studio/

929_01.png

こちらから「android-studio-ide-181.5056338-linux.zip」をダウンロードしました。
ダウンロードサイズは1GB超えです。

こちらのインストールガイドを参考に、インストールを進めます。
https://developer.android.com/studio/install


Linux に Android Studio をインストールする手順は次の通りです。

1.ダウンロードした .zip ファイルを、利用方法に応じて適切な場所に解凍します。たとえば自身のユーザー プロファイル用であれば /usr/local/、共有ユーザー用であれば /opt/ などに解凍します。

2.Android Studio を起動するため、ターミナルを開いて android-studio/bin/ ディレクトリに移動し、studio.sh を実行します。
ヒント: すべてのディレクトリから Android Studio を起動できるようにするには、環境変数の PATH に android-studio/bin/ を追加します。

3.Android Studio の以前の設定をインポートするか否かを選択して、[OK] をクリックします。

4.Android Studio セットアップ ウィザードに従い、開発に必要な Android SDK コンポーネントのダウンロードなどのセットアップ処理を進めます。

注: 64 ビット版の Ubuntu をご利用の場合は、以下のコマンドで 32 ビット用のライブラリをいくつかインストールする必要があります。

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++




指示に従い、必要なライブラリをインストール。
※そのままだと「libbz2-1.0が見つからない」エラーが発生するので微調整しています。


$ sudo apt-get install lib32z1 lib32ncurses5 libbz2-1.0:i386 lib32stdc++6



ダウンロードしたzipファイルをホームディレクトリの「android-studio」に解凍しました。
インストーラーを起動します。


$ ~/android-studio/bin/studio.sh



後はセットアップ手順にしたがってインストールを行います。
スクリーンキャプチャを添付しておきます。

929_02.png

929_03.png

929_04.png

929_05.png

929_06.png

929_07.png

929_08.png

929_09.png

これでセットアップは完了です。



Android Studioとエミュレーターの起動



新しいプロジェクトを作成してみます。

929_10.png

デフォルトのままウィザードを進めました。

929_11.png

929_12.png

929_13.png

929_14.png

929_15.png


雛形のプロジェクトが作成できました。
初回はgradleが必要なライブラリのダウンロードを実行するのでちょっと待ちます。
デバッグボタンを押してみます。

929_16.png


まだエミュレーターが存在しないはずなので、「Create New Virtual Device」をクリック。

929_17.png


デフォルトで選択されている「Nexus 5X」ををのまま採用しました。

929_18.png


「Download」をクリックしてOSのイメージをダウンロードします。

929_19.png

929_20.png

929_21.png

929_22.png



/dev/dvm device: permission denided.


というエラーが発生していますね。

ちなみにkvmは既にインストール済です。
Ubuntu 18.04 KVMのインストールと、bridge接続の構成

以下のコマンドでkvmグループに自分自身を追加しておきました。


$ sudo adduser `whoami` kvm
$ sudo chown `whoami` /dev/kvm



※参考
Android Studio: /dev/kvm device permission denied


エミュレーターのウィザードを進めます。

929_23.png


エミュレーターが追加されました。
選択して起動してみます。

929_24.png

動いてくれました。

929_25.png




起動アイコン



デスクトップのアイコンから起動できるよう、「android-ide.desktop」というファイルを作成。
内容はこんな感じになりました。


[Desktop Entry]
Type=Application
Name=Android IDE
GenericName=Android IDE
Comment=Android IDE
Exec=/home/<user_name>/android-studio/bin/studio.sh
Icon=/home/<user_name>/android-studio/bin/studio.png
Terminal=false
Categories=Development;IDE;
Name[ja_JP]=Android IDE



実行権限を付与しておきます。


ダブルクリックすると初回は警告が表示されますが「信頼して起動」を選択。

929_26.png

これでIDEが起動できるようになりました。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/11/18(日) 19:19:07|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

JavaScript 連想配列の先頭に要素を追加する(jQuery UIダイアログのボタンを先頭に追加)

ことの発端は、jQuery UIのモーダルダイアログ。
処理によって、ダイアログに表示するボタンを変更したい。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         const dialog = $( "#dialog-form" ).dialog({
  22.             buttons: {
  23.                 'はい': () => {
  24.                     dialog.dialog('close');
  25.                 }
  26.             }
  27.         });
  28.     });
  29.     $('#pattern2').on('click', function() {
  30.         const dialog = $( "#dialog-form" ).dialog({
  31.             buttons: {
  32.                 'いいえ': () => {
  33.                     dialog.dialog('close');
  34.                 },
  35.                 'はい': () => {
  36.                     dialog.dialog('close');
  37.                 }
  38.             }
  39.         });
  40.     });
  41.     
  42. })
  43. </script>
  44. </body>



「はい」をクリックしたとき。

910_01.png

「いいえ、はい」をクリックしたとき。

910_02.png


こんな感じで、ダイアログ表示部分を共通化したとします。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons;
  28.         switch(mode) {
  29.             case 'pattern1':
  30.                 buttons = {
  31.                     'はい': () => {
  32.                         dialog.dialog('close');
  33.                     }
  34.                 };
  35.             break;
  36.             case 'pattern2':
  37.                 buttons = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     },
  41.                     'はい': () => {
  42.                         dialog.dialog('close');
  43.                     }
  44.                 };
  45.             break;
  46.         }
  47.         const dialog = $( "#dialog-form" ).dialog({
  48.             buttons: buttons
  49.         });
  50.     };
  51.     
  52. })
  53. </script>
  54. </body>




addFirstというか、連想配列の先頭に要素を追加できれば便利なのに。
※このプログラムは動きません。


  1.     const show_dialog = (mode) => {
  2.         let buttons = {
  3.             'はい': () => {
  4.                 dialog.dialog('close');
  5.             }
  6.         };
  7.         switch(mode) {
  8.             case 'pattern1':
  9.                 // nothing
  10.             break;
  11.             case 'pattern2':
  12.                 buttons.addFirst({
  13.                     'いいえ': () => {
  14.                         dialog.dialog('close');
  15.                     }
  16.                 });
  17.             break;
  18.         }
  19.         const dialog = $( "#dialog-form" ).dialog({
  20.             buttons: buttons
  21.         });
  22.     };






Object.assign()



こちらが参考になりました。
連想配列などのオブジェクトの値をマージするにはObject.assign()を利用する


Object.assign([最初に追加したい配列], [既存の配列])



以下のように修正しました。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons = {
  28.             'はい': () => {
  29.                 dialog.dialog('close');
  30.             }
  31.         };
  32.         switch(mode) {
  33.             case 'pattern1':
  34.                 // nothing
  35.             break;
  36.             case 'pattern2':
  37.                 const firstButton = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     }
  41.                 };
  42.                 buttons = Object.assign(firstButton, buttons);
  43.             break;
  44.         }
  45.         const dialog = $( "#dialog-form" ).dialog({
  46.             buttons: buttons
  47.         });
  48.     };
  49.     
  50. })
  51. </script>
  52. </body>



これで望みどおり、「いいえ」ボタンが先頭に追加できました。




$.extend



Object.assign()、一部のブラウザでは対応されていないようです。
Object.assign()

jQueryの$.extendでも同様の効果が得られるようなので試してみます。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  6. </head>
  7. <body>
  8.     <h3>Dialog</h3>
  9.     <button id="pattern1">はい</button>
  10.     <button id="pattern2">いいえ、はい</button>
  11.     <div id="dialog-form" title="ダイアログサンプル" style="display:none">
  12.         <p>最初にボタンを追加したい!</p>
  13.     </div>
  14.     
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  16. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  17. <script>
  18. $(function() {
  19.     
  20.     $('#pattern1').on('click', function() {
  21.         show_dialog('pattern1');
  22.     });
  23.     $('#pattern2').on('click', function() {
  24.         show_dialog('pattern2');
  25.     });
  26.     const show_dialog = (mode) => {
  27.         let buttons = {
  28.             'はい': () => {
  29.                 dialog.dialog('close');
  30.             }
  31.         };
  32.         switch(mode) {
  33.             case 'pattern1':
  34.                 // nothing
  35.             break;
  36.             case 'pattern2':
  37.                 const firstButton = {
  38.                     'いいえ': () => {
  39.                         dialog.dialog('close');
  40.                     }
  41.                 };
  42.                 //buttons = Object.assign(firstButton, buttons);
  43.                 buttons = $.extend(firstButton, buttons);
  44.             break;
  45.         }
  46.         const dialog = $( "#dialog-form" ).dialog({
  47.             buttons: buttons
  48.         });
  49.     };
  50.     
  51. })
  52. </script>
  53. </body>



こちらでも、同様の効果が得られました。


テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/07/11(水) 22:41:40|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

JMeter 4.0 GUI非表示でテストを実行する(Don't use GUI mode for load testing !)

Ubuntu 18.04 + JMEter 4.0で負荷テストを実行してみました。
JMeter 4.0で画像やjs,cssリソースを含めた負荷テストを実行する

GUI起動時、コンソールに気になるメッセージが...


$ ./jmeter.sh
================================================================================
Don't use GUI mode for load testing !, only for Test creation and Test debugging.
For load testing, use NON GUI Mode:
jmeter -n -t [jmx file] -l [results file] -e -o [Path to web report folder]
& increase Java Heap to meet your test requirements:
Modify current env variable HEAP="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m" in the jmeter batch file
Check : https://jmeter.apache.org/usermanual/best-practices.html
================================================================================



GUIモードはテストプランを作成するときのみ利用して、
実際のテストはコンソールで実行しろとのこと。


コマンドライン実行



こちらを参考にさせていただきました。
【JMeter】負荷テスト実行はGUIから行ってはならない

最低限実行するのに必要なオプションは、


-n (GUI非表示)
-t [テストプランを保存したjmxファイルパス]
-l [結果の出力先]



こんなコマンドで実行してみました。


$ bin/jmeter.sh -n -t 結果を表で表示.jmx -l result.jtl





結果の確認



出力したjtlファイルをGUIのリスナーで読み込むことでテスト結果を確認できます。
例として、結果を表で表示してみます。

「テスト計画」を右クリックして[追加] - [リスナー] - [結果を表で表示]を選択。

908_01.png

「全てのデータをファイルに出力」の「参照」をクリックして、上記で出力した
.jtlファイルを指定します。
「出力」の項目でファイルを読み込めるの、ちょっと罠ですね。気が付きませんでした。

908_02.png

こんな感じでコマンドで実行したテストの結果が確認できます。

908_03.png




htmlでレポート表示



実行後、html形式のレポートを出力するにはこんな感じのコマンドです。
※jtlファイルや-oで指定した出力先フォルダが存在するとエラーになるので、事前に消しておきます。


$ bin/jmeter.sh -n -t 結果を表で表示.jmx -l result.jtl -e -o report



テスト対象のphpに、こんな仕込みを入れて一定の割合で500エラーが発生するようにしておきました。


  1. <?php
  2. $r = rand (1, 10);
  3. if ($r == 1) {
  4.     header('HTTP', true, 500);
  5.     exit();
  6. }
  7. ?>




レポートを出力すると、こんなhtmlが生成されます。

908_04.png

908_05.png


GUI画面より結果を確認しやすいかもしれませんね。



【参考URL】
【JMeter】負荷テスト実行はGUIから行ってはならない
PHPらしいheader関数のシンプルなコード例

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/07/05(木) 00:25:18|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

JMeter 4.0で画像やjs,cssリソースを含めた負荷テストを実行する

負荷テストといえばApache JMeter
https://jmeter.apache.org/

久しぶりに使用するので、改めて使い方を調べてみます。
以前使用したときのバージョンは2.12ですが、現在は4.0が最新版でした。
Apache JMeter 2.12の簡単な使い方

Ubuntu 18.04で動かしてみます。


jreのインストール



Java製のツールなので、jreをインストールしておきます。


$ sudo apt install openjdk-11-jre





JMeterのダウンロードと実行



以下のURLからJMeterをダウンロードします。
https://jmeter.apache.org/download_jmeter.cgi

907_01.png

「apache-jmeter-4.0.tgz」をダウンロードし、解凍します。
解凍したフォルダのbinに「jmeter.sh」があるので、実行します。


$ cd apache-jmeter-4.0/bin/
$ ./jmeter



しばらく見ないうちに、おしゃれな画面になりましたね。

907_02.png



テストの作成



http://192.168.1.102/index.phpに対して負荷テストを実行してみます。
こんな画像やjs,cssを含むページを作成しました。

・index.php


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <link rel="stylesheet" type="text/css" href="css/sample.css">
  5. <title>jmeter</title>
  6. </head>
  7. <body>
  8.     <h3><?php echo('hello, JMeter!'); ?>
  9.     <div>
  10.         <img src="img/cc1.jpg">
  11.     </div>
  12.     <div>
  13.         <img src="img/cc2.jpg">
  14.     </div>
  15.     <div>
  16.         <img src="img/cc3.jpg">
  17.     </div>
  18.     <div>
  19.         <img src="img/cc4.jpg">
  20.     </div>
  21.     <script src="js/jquery-3.3.1.min.js"></script>
  22.     
  23. </body>
  24. </html>



907_03.png

※画像はこちらからお借りしました。
https://matome.naver.jp/odai/2135753241807550401

「テスト計画」を右クリックし,「追加」-「Threads(Users)」-「スレッドグループ」を選択。

907_04.png

スレッド数は「50」
Ramp-Up期間(秒)は「10」
ループ回数は「100」にしてみました。

907_05.png

続いて、「スレッドグループ」を右クリックし,「追加」-「サンプラー」-「HTTPリクエスト」を選択。

907_06.png

サーバー名またはIPは「192.168.1.102」
パスは「index.php」と指定します。

907_07.png

「スレッドグループ」を右クリックし,「追加」-「リスナー」-「結果を表で表示」を選択。

907_08.png

ここまで設定できたら、Ctrl + Sで設定を保存しておきます。

907_09.png



テストの実行



ツールバーの「開始」をクリックでテスト実行です。

907_10.png

スレッド数50で100回ループなので、5,000回リクエストが実行されます。

907_11.png



画像やjs,cssも



nginxのログを見てみると、index.phpにしかアクセスがないことがわかります。


$ tail /var/log/nginx/access.log
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:17:49 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"



画像やjs,cssのダウンロードも含めた負荷テストがしたい場合、
こちらが参考になりました。
画像やjavascript、cssなどを取得する「Embedded Resources from HTML Files」

「HTTPリクエスト」の「Advanced」タブを表示します。
「全てのイメージとアプレットを繰り返しダウンロードする(HTMLファイルのみ)」にチェックをつけるだけ。

907_12.png

再度テスツを実行してログを確認すると、ちゃんと画像やjs,cssもダウンロードされていました。

907_13.png


$ tail /var/log/nginx/access.log
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc3.jpg HTTP/1.1" 200 951058 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc4.jpg HTTP/1.1" 200 221748 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /js/jquery-3.3.1.min.js HTTP/1.1" 200 86927 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /index.php HTTP/1.1" 200 465 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /css/sample.css HTTP/1.1" 200 34 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc1.jpg HTTP/1.1" 200 129885 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc2.jpg HTTP/1.1" 200 207705 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc3.jpg HTTP/1.1" 200 951058 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /img/cc4.jpg HTTP/1.1" 200 221748 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"
192.168.1.4 - - [04/Jul/2018:14:23:06 +0000] "GET /js/jquery-3.3.1.min.js HTTP/1.1" 200 86927 "-" "Apache-HttpClient/4.5.5 (Java/10.0.1)"




【参考URL】
Apache JMeter 2.12の簡単な使い方
画像やjavascript、cssなどを取得する「Embedded Resources from HTML Files」

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/07/04(水) 23:48:42|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

AWS API GatewayをjQuery $.ajaxで呼び出し時に「No 'Access-Control-Allow-Origin' header is present on the requested resource.」

API GatewayでLambdaの関数を公開しました。
AWS API Gateway経由でLambda(Java)を呼び出す

jQueryから呼び出してみます。


サンプル



ボタンを押すとapiにデータをpost。
結果を表示する簡単なサンプルです。


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/hello',
  17.             data:JSON.stringify({
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.                 })
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



ボタンを押してみると、Consoleにエラーが表示されます。


No 'Access-Control-Allow-Origin' header is present on the requested resource.





CORSの有効化



そういえば、API Gatewayの設定に「CORSの有効化」という項目がありました。
リソースを選択して、「アクション」の「CORSの有効化」を選択。

889_01.png

「CORSを有効にして既存のCORSヘッダーを置換」をクリック。

889_02.png

確認ダイアログが表示されます。
「はい、既存の値を置き換えます」をクリック。

889_03.png

有効化されました。

889_04.png


これで動くだろうと思ったら、エラーが解消されません。
なぜだ?




APIのデプロイ



設定を変更しても、デプロイするまで反映されません。
「アクション」から「APIのデプロイ」を選択。

889_05.png

公開中の「dev」を更新します。

889_06.png

これで動いてくれました。

889_07.png



その他の注意点



他にハマったポイントとして、


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/hello',
  17.             data:{
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.             }
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



このように、dataをJSON.stringifyせずに送信した場合や、


  1. <html lang="ja">
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>sample</title>
  5. </head>
  6. <body>
  7.     <h3>api gateway</h3>
  8.     <button id="run">実行</button>
  9.     <div id="result"></div>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <script>
  12. $(function() {
  13.     $('#run').on('click', function() {
  14.         $.ajax({
  15.             type:'POST',
  16.             url:'https://example.execute-api.ap-northeast-1.amazonaws.com/dev/bad_resource',
  17.             data:JSON.stringify({
  18.                 firstName: 'jQuery',
  19.                 lastName: 'call'
  20.             })
  21.         }).done(json => {
  22.             $('#result').html(json['greetings']);
  23.         });
  24.     });
  25. })
  26. </script>
  27. </body>



このように、リソース名の指定が誤っている場合も「Access-Control-Allow-Origin」エラーが表示されました。
※下の例の場合は、ステータスコードは403になる。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2018/05/23(水) 00:43:33|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ