TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でマップ(MapFragment)を表示させる方法【初心者向け】
オーダーメイドコース
icon
icon
Androidアプリ開発

Androidアプリ開発でマップ(MapFragment)を表示させる方法【初心者向け】

Androidアプリ開発でGoogleマップを【MapFragment】を使って表示させる方法を初心者向けに解説した記事です。初めてでも完成できるように紹介しています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリ開発では、MapFragmentを画面に埋め込んでGoogleマップを表示させることができます。

今回は初心者の方を対象に、MapFragmentを追加する方法と基本的な使い方をご紹介します。これを使えば地図アプリの開発も可能です。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！Googleアプリに地図を入れたいんですけど、いい方法ありませんか？

田島悠介

それならMapFragmentっていうGUIコンポーネントを使うといいよ！

大石ゆかり

どうやって使うんですか〜？

 

MapFragmentとは

MapFragmentは、Googleが提供しているGUIコンポーネントで、GoogleMapをAndroidアプリに組み込むことができます。Android端末のGPS機能と組み合わせて、端末が現在ある位置を地図に表示したりさまざまな使い方が可能です。

今回は、MapFragmentを配置し地図を表示するところまで扱います。

 

事前準備として、Google API利用するGoogleアカウントを確認しておいてください。

MapFragmentに地図を表示させるには、以下のようなステップで進めていきます。最後に具体的なGoogle Maps APIの使い方を紹介します。

それでは手順を追って説明していきます。

 

 

プロジェクトを作成する

Android Studioの「Start a new Android Studio project」を選択します。

「Next」で次に進み、「Add an Activity to Mobile」で「Google Map Activity」を選択してください。

 

「Finish」を押してプロジェクトを新規作成します。MainActivityにMapFragmentが組み込まれた状態で作成されます。

 

[PR] Androidアプリ開発コース

Google APIからMaps API keyを入手する

プロジェクトを新規作成すると、「google_maps_api.xlml」ファイルが表示されます。

「https://console.developers.google.com…」で始まる行をコピーして、ブラウザで開きます。

ブラウザで開いたら、画面の指示に従って進めます。最後に「APIキーを作成しました」と表示されますので、コピーボタンを押してAPIキーをコピーします。

 

プロジェクトにGoogle Maps API keyを追記する

Android Studioに戻ります。表示されている「google_maps_api.xlml」ファイルの「YOUR_KEY_HERE」と書かれている部分を、上記で入手したMaps API Keyで置き換えてください。

 

 

アプリを実行する

エミュレーターでアプリを実行した場合、以下のように表示される場合があります。その際は画面の指示に従い、Google Play servicesを更新してください。

アプリを起動すると、画面にGoogleマップが表示されます。

画面に何も表示されない場合は、「google_maps_api.xlml」ファイルのMaps API Keyが正しく更新されているか、再度ご確認ください。

 

Google Maps APIの使い方の例

最後に、実際に使われている、Google Maps API の使い方の例を見ていきましょう。

MainActivity.javaのonMapReadyを以下のように書き換えます。

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    // Add a marker in Tokyo station and move the camera
    LatLng tokyo = new LatLng(35.681167, 139.767052);
    mMap.addMarker(new MarkerOptions().position(tokyo).title("東京駅です！"));
    mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(tokyo, 15));
}

実行すると、東京駅を中心とした、拡大された地図が表示されています。

それでは詳しく見ていきましょう。

Google Maps API では緯度と経度を指定して地図を表示することができます。東京駅の緯度と経度は「35.681167, 139.767052」ですので以下のように指定します。

LatLng tokyo = new LatLng(35.681167, 139.767052);

 

次のコードで東京駅の緯度経度にマーカーを配置しています。マーカーにはタイトルを指定できます。この場合は「東京駅です！」と指定しています。

mMap.addMarker(new MarkerOptions().position(tokyo).title("東京駅です！"));

 

最後のコードはズームレベルの指定です。数値は大きくなるほど拡大され、最大は21程度です。東京駅の緯度経度を中心とした、ズームレベル15の地図を表示するには以下のように指定します。

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(tokyo, 15));

 

今回の記事は以上です。

Androidアプリ開発の他のGUIコンポーネントを使いたい場合は、Androidアプリ開発でImageViewを追加する方法も合わせてご覧ください。

 

大石ゆかり

こんなに簡単に地図を表示できるんですね〜♪

田島悠介

うん、そうだね。GPSなんかとも連携できるから、使いたくなったら調べて使ってみると良いね。

大石ゆかり

はい、わかりました〜♪

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、RelativeLayout...
Androidアプリ開発

Androidアプリ開発でTypefaceクラスを使ってフォントのスタイルを指定する方法【初心者向け】

Androidアプリ開発では、Typefaceクラスを使ってフォントや書体を変更することができます。 今回はTypefaceクラスを使ってフォントのスタイ...
Androidアプリ開発

Kotlinの関数名の頭にある「::」とは何かを現役エンジニアが解説【初心者向け】

Kotlinの関数名の頭にある「::」とは何かについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
Androidアプリ開発

Androidアプリ開発でTimePickerDialogを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのうちの1つである、TimePick...
Androidアプリ開発

Kotlinのequalsメソッドの使い方を現役エンジニアが解説【初心者向け】

Kotlinのequalsメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初...
Androidアプリ開発

Androidアプリ開発言語のJavaとKotlinを現役エンジニアが比較【初心者向け】

Androidアプリ開発言語のJavaとKotlinについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
Androidアプリ開発

あわせてよく読まれている記事

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリ開発コースGridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでGoogle Calendar APIを実装する方法についてTechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせて見てみましょう。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでGoogle Calendar APIを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Google Calendar APIとは Googleカレンダーとは、クラウドのカレンダー画面で予定を管理するサービスの名前です。 APIとは、Application Programming Interface)の略です。 APIはアプリなどのサービスの機能を画面を通さずに直接呼び出して使うもので、画面を通さずに直接呼び出すことで一部の機能だけを利用し、自分のサイトやサービスに追加することができます。 そして、今回は公開されているGoogleカレンダーの「日本の祝日」から、APIを使って祝日名と日付を取得していきましょう。 JavaScriptでGoogle Calendar APIを実装する方法 下記の3つの手順でJavaScriptを書く前の準備が必要です。 Googleアカウントを用意する APIの操作に必要なキーを用意する APIで操作するカレンダーのIDを用意する 準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。 それでは、それぞれの手順の具体的な方法を確認していきましょう。   Googleアカウントを用意する すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。 アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。   APIの操作に必要なキーを用意する APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。 次の3つのステップをおこなってください。 1.Google Calendar APIのページにアクセスします。2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。 3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。   APIで操作するカレンダーのIDを用意する Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。 カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「＋」を押してみましょう。 表示されたメニューから「関心のあるカレンダーを探す」を選択してください。 カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。 日本の祝日の「＋」横にあるメニューから「設定」を選択します。 設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。 これで準備完了です。 では、JavaScriptでAPIの呼び出しです。 Googleから提供されているライブラリを下記のように読み込みます。 <script src="https://apis.google.com/js/api.js"></script> 後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。   [PR] Androidアプリ開発コース実際に書いてみよう 今回はHTMLソースの中にscriptタグでJavaScriptを書いていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id='resultArea'></div> </body> <script src="https://apis.google.com/js/api.js"></script> <script> const API_KEY
JavaScript

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリ開発コースTableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     TableLayout上のパーツの配置を調整する 「0」ボタンは2つのセルをまたいで配置されています。 複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ />   実行すると、この画像のようにボタンが表示されます。   また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。 列番号は、一番左から「0,1,2,3…」となっています。 <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow>   さらに実行すると、この画像のようにボタンが表示されます。 これで完成です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり tableタグを同じように設置できますね！ 田島悠介 そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

PythonでbitFlyer APIを利用する方法を現役エンジニアが解説【初心者向け】

PythonでbitFlyer APIを利用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでbitFlyer APIを利用する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 bitFlyerとは bitFlyer APIでできる事 bitFlyer APIを利用する方法 実際に書いてみよう まとめ   bitFlyerとは bitFlierは仮想通貨の取引所サービスです。 2014年に設立したbitFlyer社が運営しているサービスです。無料で口座を解説することができて、登録後も年会費は一切かかりません。登録手続きには書類がなくすべてWeb上で完結します。そして、取引は100円から始められるので、仮想通貨取引をちょっと試したいときにぴったりな取引所です。 そして、今回の本題であるAPIが提供されているので、取引の自動化や仮想通貨のデータ取得を行うシステムを自作することもできます。 [PR] Androidアプリ開発コースbitFlyer APIでできる事 先程述べたようにbitFlyerにはAPIが提供されており、API関連では4種類のAPIが提供されています。 bitFlier Lightning こちらは開発者向けにレート情報を取得したり自動取引などをできる様々なAPIが提供されています。個人で使う分にはこちらのAPIでbitFlyerで提供されているサービスを使っていただけます。APIには認証のいらないものと認証の必要があるものがあります。 https://lightning.bitflyer.com/docs?lang=ja bitFlier Lightning API Playground こちらは先程のbitFlyer LightningのAPIをブラウザ上で試していただけるサービスです。プログラムやコマンドを実行する前に試したいときに使えるサービスです。認証がいらないAPIはすぐに実行できますが、認証がいるものはAPIキーの用意が必要になります。（APIキーの取得方法はこのあと紹介します） https://lightning.bitflyer.com/docs/playground?lang=ja#GETv1%2Fgetmarkets/javascript chainFlyer API 仮想通貨のベースになるブロックチェーンの取引の流れを見るためのAPIです。ブロック、トランザクション、アドレスを取得することができます。さらにchainFlyerのサービスを見るとマイニングの様子をリアルタイムで見ることができるため非常に面白いサービスです。 https://chainflyer.bitflyer.com/API/docs?lang=ja Echo API Echoは法人向けにビットコインの送付を行うためのサービスです。これを使えば自社のサービスでポイント交換発注を行った際にビットコインを自動送付するシステムになっています。このシステムを開発する際に使うAPIがEcho APIです。このAPIを使うにはbitFlyerの法人アカウントを作成する必要があります。 https://bitflyer.com/ja-jp/corporate/echo bitFlyer APIを利用する方法 実際にAPIを利用する方法を紹介します。先程いくつかAPIを紹介しましたが、今回は１つ目に紹介したbitFlyer lightningに絞って紹介します。 先程述べたようにこちらのAPIは認証のいらないPublic APIと認証が必要なPrivate APIの2種類が存在します。Public APIは認証がいらないので、bitFlyerのアカウントを持ってなくてもすぐお使いいただけます。 一方Pribate APIについては、認証のためのAPI key, API secretが必要になります。bitFlyerのアカウントを作成したら、開発者ページを開き、左側のメニューからAPIを選択して、API keyとAPI secretを作成します(作成は無料です)。 実際に書いてみよう それでは、実際にPythonでAPIを使ってみましょう。 bitFlyer lightning APIをPythonで使う場合、pipでインストールできる　Pythonラッパーライブラリがあるので今回はこれを使っていきたいと思います。以下のコマンドでインストールします。 pip install bitflyer インストールを終えたらBTC/JPYの板情報（どの値段で売買注文が出ているかをまとめた情報）を取得し、CSV 書き出すコードを動かしてみます。Public APIを使用しているので、ライブラリをインストールすればすぐにお使いいただけます。JSONからCSVに変換するためにpandasを使用するので、まだインストールしていない場合は、以下のコマンドを実行しpandasをインストールします。 pip install pandas インストールを終えたら、以下のコードを任意のディレクトリに保存します。 from bitflyer import public import pandas as pd import json board = public.Public().getboard() print(json.dumps(board, sort_keys=True, indent=4)) bids = json.dumps(board['bids']) df = pd.read_json(bids) df.to_csv('bids.csv', encoding='utf-8') サンプルを実行すると、以下のように版情報がCSVで出力されます。 まとめ 今回はbitFlyerのAPIをPythonで動かしてみました。 Pythonであれば専用のライブラリを使って簡単にAPIを操作することができるため、今回のようなマーケットの情報を仕入れることもできますし、今回は紹介しませんでしたが、Private APIを使えば仮想通貨の自動取引システムも簡単に作ることができるので、気になった方はぜひお試しください。 監修してくれたメンター メンター三浦 モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

WordPressでGoogleマップの地図を表示させる方法【初心者向け】

店舗や企業のページを作る際に地図を表示することも多いと思います。 そんな特に便利なのはGoogle Mapの表示です。 そこで今回は、WordPressで作成したサイトにGoogle Mapの地図を表示させる方法をお届けします。 目次MapFragmentとはプロジェクトを作成するGoogle APIからMaps API keyを入手するプロジェクトにGoogle Maps API keyを追記するアプリを実行するGoogle Maps APIの使い方の例 大石ゆかり 田島メンター！！WordPressの記事にGoogle Mapを入れたいんですけど、どうやったらいいんですか〜？ 田島悠介 記事に地図を入れる方法は「直接地図を挿入する方法」と「プラグインを利用する方法」の2つの方法があるよ。両方とも教えるね！ 大石ゆかり はい、お願いします♪   直接地図を挿入する方法 Google Mapから直接コードを取得して、表示したいところに挿入する方法です。   地図出力用のコードを取得 まず、Google Mapで、挿入したい地図を表示します。 （今回はスカイツリーを選んでみました） 左上のメニューの「地図を共有または埋め込む」ボタンがあるので、クリックします。   すると、ポップアップが立ち上がるので、「地図を埋め込む」をクリックします。   左のプルダウンから、「カスタムサイズ」を選択すると、好みのサイズに変更できます。   サイズ調整が終わったらコードをコピーします。   WordPressに反映 WordPressの「投稿>新規追加」で開いたらタイトルを入力します。 ＋ボタンで「カスタムHTML」ボタンを検索してクリックします。   コピーしたコードを貼り付けます。   公開すると、このように表示されました。   プラグインを利用する方法 レストランの紹介をするブログの場合など、地図をたくさん埋め込む必要がある場合は、プラグインを使うと効率的に挿入できます。 WordPress 5.0以降、ブロックエディタが追加されました。 ブロックエディタには、さまざまなブロックが用意されています。 標準でサポートされていない（バージョン5.8.1現在）Google Mapのブロックのプラグインは、エディタで追加できます。 ＋ボタンで「すべて表示」をクリックすると、左側にブロック一覧が表示されます。 上部の検索窓で「google map」を検索すると、インストール可能なブロックのプラグインが一覧されます。   今回は、「Map」というブロックのプラグインをインストールします。 クリックすると、インストールしてそのまま挿入場所に地図が表示されます。 場所がニューヨークになっているので、次は住所を修正します。 ⋮（3点リーダー）をクリックして「追加設定を表示」をクリックします。   右側に追加設定が表示されます。   ここでAddressに、たとえば「東京都墨田区押上1−1−2」と入力して、Zoomのスライドバーを右に拡大すると、地図が拡大表示されます。 住所と大きさを指定するだけで簡単に地図を挿入できるので、わざわざGoogle Mapを開く必要もありません。 更新すると、下記のように表示されます。   これだけで完了です。   以上のように、プラグインを使っても使わなくてもGoogle Mapは簡単に挿入できます。 まずは自分に合った方法を試してみてください。   大石ゆかり 地図を埋め込むことができました〜♪ 田島悠介 お店の紹介とかイベントの開催場所とか、記事中に地図を埋め込みたい場面ってたくさんあるから、覚えておくと良いね♪ 大石ゆかり はい♪   [PR] Androidアプリ開発コースWordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

【ゼロから作る！】初心者から始めるAndroidアプリ開発の開発手順とは

Androidアプリの開発手順をゼロから紹介していきます。 今回の記事では、アプリを作ったことがないという未経験者でも分かりやすく2人のキャラクターが登場しながらAndroidアプリ開発について解説しています。 「Androidアプリを作る上で必要なもの」「Androidアプリを作ってリリースしてみたい」などそれぞれシチュエーションに分けて細かく紹介していきます。   では、Androidアプリの開発手順を実際に見ていきましょう！   目次 Androidアプリ開発をする上で必要なもの 実際にAndroidアプリを作ってみる アプリをリリースしてみる アプリで収益を得る   大石ゆかり 田島メンターってなんでiPhoneとAndroid、両方のスマホ持ってるんですかー？ 田島悠介 なんでって両方のアプリを勉強するためだよ！ 大石ゆかり え、でも同じアプリ入れてるじゃないですかっ！ 田島悠介 実はね、iPhoneとAndroidで同じアプリでも違うデザインになっていたりするんだよ！ 大石ゆかり へぇ〜そうなんですね。どっちも同じように作ってると思ってました！ 田島悠介 実は結構違うんだよね！ ちなみにiPhoneとAndroid、それぞれ持ってる人の割合って何%くらいか知ってる？ 大石ゆかり んー、私の周り見てもみんなiPhoneだからほとんどiPhoneなんじゃないですかー？ 田島悠介 たしかに日本人でiPhone使ってる人は多いよね！ でも世界ではスマホを使ってる人の71.9%くらいがAndroidって言われているんだよ！（2021年1月statcounter調べ：Mobile Operating System Market Share Worldwide | StatCounter Global Stats） 大石ゆかり え、そうなんですかー！初めて知りました！ 田島悠介 アプリを海外の人に使ってもらおうと思ったらAndroidから作る方が良いかもね！せっかくだからAndroidアプリの作り方を一通り説明しようか？ 大石ゆかり ぜひ！知っておきたいです！(Androidアプリ作れたら海外で働く夢も叶うかも♪)   Androidアプリ開発をする上で必要なもの PC(Mac/Windows/Linuxのいずれか) Android Studio JavaやKotlinなどのAndroid開発言語 Androidアプリの開発を進めるためには上の3つが必要です。   PC MacやWindowsなどのOSに関わらず、メモリは16GBほど搭載しておくと、開発する際にストレスなく動作させることが可能です。 もちろん、CPU性能も影響します。   開発環境 Android StudioではなくEclipseという環境でアプリ開発することも可能ですが、Android Studioで作る場合が一般的です。 Android Studioに関しては次の記事を参考にしていただくと分かりやすいです。 「AndroidStudio」を使ったアプリ開発環境の構築方法 | TechAcademyマガジン   言語 Java Javaは世界中の基幹システムで使われているプログラミング言語です。 Androidアプリ開発でも利用しますが、業務システムでもよく利用されるため、Javaを習得することで幅広い業務のシステム開発を行うことが可能になります。 Javaについては、次の記事を参考にしていただくと分かりやすいです。 今さら聞けない！Javaとは 【初心者向け】 | TechAcademyマガジン   Kotlin KotlinはJava言語と100%の互換性を保ちつつ、より簡潔にソースコードを書けるよう、現代的な言語仕様が多く取り入れられています。 2010年に開発が始まり、2017年にはAndroid開発用言語として正式サポートされた新しい言語のため、書きやすい文法であるよう工夫されています。 Kotlinについては、次の記事を参考にしていただくと分かりやすいです。 Androidアプリ開発に使うメリットを解説！Kotlinとは【初心者向け】 | TechAcademyマガジン   Dart（Flutter2） Dart言語を利用してAndroid開発をを行う際、Flutter2というフレームワークを利用します。 Flutter2を利用することで、「iOS」「Android」などのスマホアプリ、「Windows 10」「macOS」「Linux」などのデスクトップアプリ、「Google Chrome」「Safari」「Microsoft　Edge」など、ブラウザアプリを1つのソースコードですべて開発可能です。 https://flutter.dev/   JavaScript（React Native） JavaScriptを利用するReact Nativeでは、React.jsというフロントエンドフレームワークを利用してスマホアプリの開発が可能です。 基本的にはフロントエンドプログラミングの技術を利用しているため、フロントエンドエンジニアがスマホアプリを開発する際、低い学習コストで開発が可能です。 React.jsもReact NativeもFacebookがサポートしています。 React Native · A framework for building native apps using React また、中にはツールを使ってアプリ開発できるものもありますが、プログラミングをして自分の力で作りたいという人は「Java」というプログラミング言語を理解する必要があるでしょう。   C#（Unity） C#を利用して開発するUnityでは、ゲームの開発を行うことが可能です。 Unityで開発したゲームは、AndroidやiPhoneなどのスマホアプリだけでなく、PlayStationやNintendoSwitchやXboxなどの家庭用ゲーム機用や、WindowsやMacやLinuxなどのPC向けゲームなどでリリースすることが可能です。 Unityについては、次の記事を参考にしていただくと分かりやすいです。 今さら聞けない！ゲーム開発で人気のUnityとは | TechAcademyマガジン   C#（.net） Xamarin という機能を利用して、iOS、Android、Windows向けアプリケーションを実装可能です。 Xamarinという名称は、今後、MAUI という名称に変更される予定です。 Xamarin とは – Xamarin | Microsoft Docs   ノーコード ノーコードとは、コードを書かずに実装が可能なツールを言います。 実際プログラミング言語を学ばなくてもある一定レベルのアプリを作成することが可能です。 スマホアプリを実装可能なノーコードツールはたくさんありますが、代表的なものとしてGoogleが買収したAppSheetなどがあります。 Make an App with No-Code. Start building today for free.
Androidアプリ開発

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でマップ(MapFragment)を表示させる方法【初心者向け】