【手元でプログラミング学習！】Pocket Programming(ポケプロ)で「Ruby/Rails編」をやってみた！

アプリでRuby/Railsが学習できるというPocket Programming(ポケプロ)！プログラミングと言えばPCのイメージがあると思いますが、アプリでどうやって学べるのか実際に行ってみました。

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

Pocket Programming(ポケプロ)というプログラミングが学習できるスマホアプリをご存知でしょうか。有料アプリではありますが、iOS/Androidどちらにも対応しています。

今回は、Androidの端末でRuby/Rails編を実際に使ってみたレポート記事になります。Rubyの学習には最適なアプリでしょう。

インストールしようか迷っている人はぜひ参考にしてみてください。

Pocket Programmingとは

スクリーンショット 2016-02-17 19.43.55

Pocket Programmingは、3択のクイズ形式でプログラミング知識の定着を目指すスマホアプリです。1日10問を4週間で覚えるプログラムになっています。スマホで勉強できるので、帰宅中の電車内でも進められるでしょう。

Androidでは¥99、iOSでは$2.99でインストールすることができます。

iOS / Android

Pocket Programmingをやってみた

有料アプリなので、問題等は表示していませんが、流れはイメージできるかと思います。

アプリの下部を見ると分かりますが、トップページは3つの画面から構成されています。一番左は、現在の学習状況を表示しています。

Screenshot_2016-03-14-20-10-19

進めていくと正解率に合わせてRuby/Railsの自分のランクを教えてくれます。ぜひランクAを目指して頑張りましょう。

真ん中のタブでは、今までの問題を復習することができます。

Screenshot_2016-03-14-20-10-08

各Weekの後半になるにつれて問題の難易度も上がっていきます。

問題自体は4週間のプログラムですが、復習は何度も行えるので、苦手な部分も繰り返し行うことで知識が定着していくでしょう。

一番右のタブでは、自分の苦手な分野を教えてくれます。「◯◯の理解がまだ甘いようです。」といったように独自のアルゴリズムで苦手な分野を分析し、対策を示してくれます。

本などで一通りRuby on Railsを覚えたという人でも自分の苦手な部分を知るきっかけになるかもしれませんね。

以上、Pocket Programmingの体験レポートでした。

1日たった10問でも進んでいる感覚やどれだけ理解しているのかを把握できるのは良いですね。

他にもAndroid/Javaコースもあり、Swiftコースも現在準備中とのことなので、忙しい人などスキマ時間にプログラミングを学習したいという人は必見でしょう。

他にもプログラミング学習ができるアプリを紹介しているので、併せてご覧ください

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

大阪のIT・情報系専門学校18選｜自分に合った学校の選び方も解説

今回は大阪中心部のIT・情報系の専門学校をまとめました。資格やスキルなど特化した学校もあるため、自分に合った学校を見つけましょう。 ...

プログラミング

プログラミングが学べる「Codecademy」を実際にやってみた【日本語にも対応】

現在アメリカではオンラインで学べるプログラミング学習サービスがすごい勢いで人気を集めています。今回は、以前に「プログラミング初心者向...

プログラミング

東京のパソコン教室20選｜自分にあった教室の選び方も紹介

東京23区内の通いやすいパソコン教室をピックアップしました。自分にあった教室を選ぶことによって、資格の取得や転職、スキルの獲得などを目指しましょう。 ...

プログラミング

【2016年最新版】プログラミング言語人気ランキングを調べてみた！

このランキングはアメリカの産業調査会社RedMonkが発表したもので、GitHubの利用状況と、プログラミングのQ&AサイトStackOverflowに...

プログラミング

IT・Web系エンジニア向けオンライン学習サービス「type IT Academy」をやってみた！

オンラインでプログラミングを学習できるサービスが国内外問わず増えていることを以前の記事で紹介していますが、よりエンジニア向けに作られたサービスも始まっているよう...

プログラミング

【よりコーディングに集中できる！】プログラミングサポートツール「Kite」が凄すぎる！

より早く、より効率的にコーディングしたい人に朗報です！「Kite」は、ターミナルやエディタと連動するプログラミングのサポートサービスです。エディタとこの...

プログラミング

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

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

最近よく耳にする「Ruby」とは一体どのような言語なのでしょうか？今回はその「Ruby」の正体を解説していきたいと思います。Web系の企業でもRubyを使っているところは多いので、これからRubyを勉強してみたいという人はぜひ参考にしてみてください。終わりには、学習方法もいくつか紹介しているので、自分の好きなやり方で勉強してみましょう。なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介ここではプログラミング言語のひとつ、Rubyについて解説していくよ。大石ゆかり田島メンター！！Rubyはどんな用途で使われる言語なんですか〜？田島悠介一番よく使われているのはWebアプリケーションかな。動的なサイトを作るのにとても役立つんだ。有名なクックパッドなどもRubyを使用して作られているよ。大石ゆかりなるほど。是非覚えてみたいです！目次 Rubyとは Rubyでできることオブジェクト指向とは Rubyの動向 Rubyが日本で人気な理由 Rubyで開発が向いているサービス Rubyのインストール Rubyの書き方 Rubyの基本構文 Rubyの学習方法 Rubyの学習時のポイント Rubyとは Rubyとは、まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語です。 CやJavaといったコンパイラ言語は、プログラムを実行するためにはコンパイルという手続き（人間が書いたソースコードを機械命令に変換）を介して初めて実行ができます。しかし、スクリプト言語はこう言った手続きが一切不要で、そのまま実行することができるため、コンパイラ言語に比べてプログラミングを手軽に行うことができます。また、オブジェクト指向言語なので、すべてのデータがオブジェクトとして表現されています。つまり継承などといったオブジェクト指向ならではの機能を使うことができます。継承をすることで書くコードの量が少なくて済み、読みやすく作業効率も上がるでしょう。 Rubyの名前の由来ですが、宝石の「ルビー」から来ています。 Perl(パール)という名前のプログラミング言語がありますが、宝石の真珠(パール)と読み方が同じという点で宝石の名前を取ったようです。なぜRuby(ルビー)なのかというと、当時のまつもと氏の会社の同僚が7月生まれで、7月の誕生石がルビーだったからです。 Ruby/Rails開発のためのおすすめエディタ/IDEも紹介しているので、合わせてご覧ください。 [PR] プログラミングで挫折しない学習方法を動画で公開中Rubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。オブジェクト指向とは従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された概念です。一般的に、以下の特徴を持っています。カプセル化継承ポリモーフィズム（多態性）カプセル化カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。継承継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。そうした際に、一から作り直すのはかなり面倒です。そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。ポリモーフィズム（多態性）ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。例えば、スマートフォンでは動画や音楽が再生できます。この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。 Rubyの動向 Rubyは現在も積極的に開発が進められています。 2020/5/23現在の最新の安定版は2.7.1です。また古いバージョンである2.4は公式サポートが終了しました。最新の2.7系では多くの機能強化やパフォーマンスの改善が行われました。詳しくは2.7.0のリリースノートを参考にしてください。 Ruby 2.7.0 リリースフレームワークであるRuby on Railsも継続して開発が行われています。 2020/5/23現在の最新バージョンは6.0.3.1です。こちらも最新の6.0系では、新しいフレームワークの導入やマルチデータベース対応など、多くの機能追加が行われています。詳しくは6.0のリリースノートを参考にしてください Rails 6.0 (英語) なお、毎年恒例のイベントであるRubyKaigi（ルビー会議）ですが、2020年のRubyKaigi2020はコロナウィルス感染症の影響で延期となっています。ただし中止ではなく延期というのは嬉しいですね。詳しくはリリース記事を参考にしてください。新型コロナウィルス感染症（COVID-19）に関するRubyKaigi2020の対応について Rubyが日本で人気な理由国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用していることは有名です。では、なぜRubyが使われているのでしょうか？一つは、Rubyの開発効率の高さです。 Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。直感的に、実装したい機能をコーディングできるためストレスフリーで開発を行うことができます。そして、フレームワーク（Ruby on Rails）の存在です。「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。このRuby on Railsの登場により、開発コスト削減を図る企業などでの利用が増加しました。また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Rails を利用していることも多いです。また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由の一つです。 C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。しかし、Rubyは開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入ります。そのため、最新情報をいち早く活用することもできるのです。 Rubyでの開発が向いているサービス Rubyは前述の通りRailsと組み合わせてRuby on Railsとして開発を行うことが一般的です。 Ruby on Railsは以下のようなサービスの開発に向いています。スタートアップ企業のWebサービス Ruby on Railsは開発効率が高いため、少人数での短期開発に向いています。スタートアップ企業のWebサービスは短期間での継続的なローンチが求められます。 Ruby on Railsはいわゆるアジャイルと呼ばれる開発手法にも適しており、少人数でサービスの基本機能を立ち上げ、ユーザーのフィードバックを得ながら継続的にサービスを改善していくことに適しています。 WebAPI経由でのサービス展開 WebAPIとはプログラムから利用するインターネット上のサービスです。例えばGoogle MapやTwitterなど、多くのサービスがWebAPIを提供しています。 WebAPIのメリットは既存のサービスを組み合わせて新たなサービスを生み出せることです。例えば気象データを提供するWebAPIをECサイトのサービスと組み合わせることで、他にはない特徴的なサービスを提供できるかもしれません。 Ruby on RailsにはAPIモードという構成があり、アプリケーションを構築する際にAPIモードを選択することでWebAPIを効率よく開発することができます。データベースと組み合わせた基幹系システム意外かもしれませんが、Ruby on Railsは大量のデータ処理や、複雑な計算を行う企業の会計などの基幹系システムのサービス開発にも向いています。 Ruby on RailsはMVCと呼ばれる安定的なサーバアーキテクチャをベースとしています。またデータベースとの連携についてもモデルクラスによるアクセスやコネクションプールなどに標準的に対応しています。レガシーシステムを更新する際の選択肢として考えても良いでしょう。 Rubyのインストール Rubyでプログラムを書こうと思ったらまず、Rubyをインストールする必要があります。手順としては、 Ruby のダウンロードページからダウンロード(執筆時最新版Ruby2.7.1)。Windowsであれば、RubyInstallerというツールでのインストールも可能です。ダウンロードしたファイルを実行し、インストール。インストールが完了したら、ターミナルやコマンドプロンプトから「ruby -v」と入力し、バージョンを確認。 ruby 2.7.1などと表示されれば完了です。田島悠介 RubyはWindowsとMacの両方で使用することができるよ。大石ゆかりやっぱりそれぞれによって開発環境の構築の方法がだいぶ違うんですか？田島悠介そうだね。また、インストールに必要なソフトがあったりと少し複雑なので、なるべく最新の情報を見てひとつずつ順番にやってみるのがいいと思うよ。公式のインストールガイドも参照しよう。 Rubyの書き方 Rubyのファイルは「.rb」という拡張子をつけることで保存されます。実際にターミナル上にHello,world!を出力するプログラムを例に書き方を紹介したいと思います。 print("Hello,world!n") この一文だけで目的のプログラムを作ることができます。他の言語では文末にセミコロンを打ちますが、Rubyではそれが必要ありません。他のプログラミング言語を少しでも学習したことがある方は、Rubyがいかにシンプルであるかが分かるかと思います。実際にRubyを使ってみたいという方は、開発環境の構築方法も合わせてご覧ください。 Rubyの基本構文 Rubyでよく使う基本構文についていくつかまとめて紹介していきます。基礎的な内容になるので、Rubyとは何かよく分からないという方でも覚えておくと今後役に立つでしょう。 if文 if文は「◯◯の場合〜〜する、△△の場合〜〜する」といった条件分岐の処理を行うことができます。「ログインできたらアカウント画面に、できなかったらエラー表示に」といった普段Webサイトを見ていると当たり前のように行なわれている処理が条件分岐なのです。 if ◯◯ then # ◯◯がtrueだった時の処理 else # ◯◯がfalseだった時の処理 end for文 for文は、繰り返し処理をする際に使います。1+2+3+4+…のように手動で足していくのは面倒ですが、「1ずつ増えた数字を繰り返し足して、100まで繰り返す」といった宣言を行うことができるようになります。 for i

Ruby

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

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？田島悠介それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。大石ゆかりあ、どうやって使うんですか〜？ GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。 GridLayoutを配置する今回は、GridLayoutを使用してこの画像のような画面を作成してみます。 GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。次に、GridLayoutの列数を指定します。列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。 [PR] プログラミングで挫折しない学習方法を動画で公開中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アプリ開発

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] プログラミングで挫折しない学習方法を動画で公開中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アプリ開発

【ゼロから作る！】初心者から始める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アプリ開発

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

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。大石ゆかり田島メンター！！FrameLayoutっていうレイアウトがあるんですけど、これって何に使うんですか〜？田島悠介 FrameLayoutはビューを重ねて表示したい時に使うんだ。ちょっと試しにやってみようか。 FrameLayoutとは FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。 FrameLayoutを配置する FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中FrameLayoutにパーツを配置する FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。配置したパーツの位置を指定することはできず、画面の左上に表示されます。さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。 FrameLayoutの応用最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。ボタンを押すことで表示される内容が変わる画面です。レイアウトは、次のようになっています。最初にLinearLayout（Vertical）（黄色枠）を配置します。次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。レイアウトのソースは以下のようになります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面3" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面１" android:textSize="40dp" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面２" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面３" /> </LinearLayout> </FrameLayout> </LinearLayout> MainActivityには以下のように記述しました。 public class MainActivity extends AppCompatActivity { private LinearLayout mLayout1; private LinearLayout mLayout2; private LinearLayout mLayout3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLayout1 = (LinearLayout)findViewById(R.id.layout1); mLayout2 = (LinearLayout)findViewById(R.id.layout2); mLayout3 = (LinearLayout)findViewById(R.id.layout3); findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout1.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout2.setVisibility(View.VISIBLE); mLayout1.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout3.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout1.setVisibility(View.INVISIBLE); } }); } } 今回の記事は以上です。さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。大石ゆかりなるほど、こうやって使うんですね！田島悠介使うのが少し難しいLayoutだけど、使い方によっては画面内で画面を切り替えるようなこともできるから、覚えておくと良いね。大石ゆかりはい！ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

Androidアプリ開発

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのradiobuttonを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。初心者向けにKotlinの入門向けサイトをまとめた記事もありますので読んでみてください。なお本記事は、TechAcademyのオンラインブートキャンプ、Androidアプリ開発講座の内容をもとに作成しています。田島悠介今回は、Androidアプリ開発に関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 KotlinでAndroidアプリのradiobuttonを追加する方法について詳しく説明していくね！大石ゆかりお願いします！目次 radiobuttonとは radiobuttonを配置してみよう radiobuttonが選択された時の処理を追加してみようまとめ radiobuttonとは radiobuttonとは複数の選択肢から1つだけを選択する際に使用するUI部品です。 [PR] プログラミングで挫折しない学習方法を動画で公開中radiobuttonを配置してみよう radiobuttonはRadioGroupの中にRadioButtonを配置する構成です。Android Developerにサンプルが紹介されていますので確認しながら進めましょう。 Android Developer – Radio Button 例えば「さくら、うめ、ぼたん」のRadio Buttonを配置するには以下のように記述します。 <RadioGroup android:id="@+id/group" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content"

Androidアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【手元でプログラミング学習！】Pocket Programming(ポケプロ)で「Ruby/Rails編」をやってみた！

Pocket Programmingとは

Pocket Programmingをやってみた

関連するキーワード

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

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

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

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

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

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

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Pocket Programmingとは

Pocket Programmingをやってみた

記事を検索

関連するキーワード

関連する記事

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

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

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