【手元でプログラミング学習！】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アプリを開発したい方はご参加ください。

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

【初心者から創れる人へ】ProgateのHTML&CSSコースをやってみた！

TechAcademyマガジンでは、過去にプログラミングの独学に使えるオンライン学習サービスの実践レポートを公開してきました。オンラインでプログラミング...

プログラミング

Webサービスをローンチする前に見ておきたいチェックリスト

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、Webデザイナー、バックエンドエンジニア...

プログラミング

IT勉強会を見つけられるサイト・ツールまとめ【全部で13種類】

エンジニアの方はもちろん、一般の方も気軽に参加できるIT勉強会が全国各地で毎日のように開催されています。開催場所も東京、大阪、名古屋、福岡など大都市では頻繁も高...

プログラミング

プログラミングは独学可能か？学習ロードマップ作りを現役エンジニアが解説【初心者向け】

プログラミング独学のロードマップ作りについて、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。なお本記事は、TechAcad...

プログラミング

18のプログラミング言語をポケモンのキャラクターに例えてみた！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Jazz Rosende 氏によって投稿されました。「...

プログラミング

【いくつ当てはまる？】優秀なエンジニアに共通する10の特徴とは！

本稿は、CodingDojoのブログ記事を、CodingDojoより了解を得て日本語翻訳し掲載した記事になります。この記事を読んでいるあなたが、もうすで...

プログラミング

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

今さら聞けない！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

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> コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

Androidアプリ開発

WordPressでソーシャルボタンを追加する方法【初心者向け】

FacebookやTwitterなどのソーシャルメディアの普及によって、ソーシャルボタンを設置するサイトが多くなってきました。記事などをシェアしてもらうことでサイトのトラフィックも増えるのでぜひ導入しておきたい機能です。そこで今回は、WordPressのサイトにソーシャルボタンを設置する方法をご紹介します。なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressの記事にFacebookやTwitterのボタンを設置したいんですけど、どうしたらいいんですか〜？田島悠介いくつか方法あるけど。できるだけ簡単な方法がいいよね。大石ゆかりそうですね。田島悠介じゃあとりあえず手軽な方法を3つ教えるね！目次ソーシャルボタンを設置する方法はいくつかありますが、本記事ではすぐに実践できる3つの方法を紹介します。ソースコードを入力してソーシャルボタンを設置する方法テンプレートを編集してソーシャルボタンを設置する方法プラグインを利用してソーシャルボタンを設置する方法自分で実施できるものから試してみてください。ソースコードを入力してソーシャルボタンを設置する方法ソーシャルメディアごとに個別の登録を行う方法です。今回は、利用者の多いTwitterとFacebookのボタンを埋め込む方法を紹介します。 Twitterボタンを設置する Twitterのツイート(tweet)ボタンを設置してみます。まずは公式サイトに掲載されているコードをコピーします。そして、Twitterボタンを表示させたい場所に直接コードを入力します。記事内に埋め込むこともできますので、今回は例として記事に埋め込みます。記事内にソースコードを記述する場合は、「テキストモード」になっているかを確認して入力してください。埋め込んでから投稿を確認してみると、ツイートボタンが設置されていることがわかります。 Facebookボタンを設置する続いて、Facebookの「いいね！(Like)」ボタンを設置してみます。まずは、「いいね」ボタンを生成するページでコードを取得しますしょう。このページからボタンのデザインなど好きな形式を選択することができます。 Twitterのボタンと同じように、Facebookボタンを表示させたい場所に直接入力します。今回は先ほどのTwitterのボタンと並べて設置してみました。大石ゆかり記事ごとに設置できるんですね！田島悠介そうだね。特定のページだけボタンを設置したいときにはこの方法が良いね。後の2つの方法はすべてのページに設置する方法だよ。 [PR] プログラミングで挫折しない学習方法を動画で公開中テンプレートを編集してソーシャルボタンを設置する先ほどのように記事ごとに貼り付けることもできますが、少し面倒ですよね。そこで、テンプレートを編集して全ての記事にソーシャルボタンを設置することにします。ここでは大きく分けて3ステップで作業を進めます。 JavaScriptの読み込みを記述するソーシャルボタンを読み込ませたいところにソースを記述するボタンの表示を調整する順番に見ていきましょう。 JavaScriptの読み込みを記述するまずは「ダッシュボード>外観>テーマの編集」からfooter.phpを開きます。ソースコードの</body>と書いてあるところの直前に、以下のコードを貼り付けてください。 ================== <!—ソーシャルボタンのスクリプトです footer.php の</body>前に貼り付けます–> <div id=”fb-root”></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async=true; js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1”; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script> <script type=”text/javascript”> window.___gcfg = {lang: ‘ja’}; (function() { var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true; po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script> <!—/ソーシャルボタンのスクリプトですここまで–> ================== ソーシャルボタンを読み込ませたいところにソースを記述する続いて、ソーシャルボタンを読み込ませたいところに次のソースを貼り付けます。普通の投稿なら、single.phpに、固定ページなら、page.phpに貼り付けます。今回は、Twitter、Facebook、Google+、はてなブックマーク、Pocketのボタンを埋め込みます。 ================== <!– Twitter –> <div> <a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</a> </div> <!– Facebook –> <div> <div data-href=”<?php the_permalink()

WordPress

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アプリ開発

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

Pocket Programmingとは

Pocket Programmingをやってみた

関連するキーワード

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

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

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

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

WordPressでソーシャルボタンを追加する方法【初心者向け】

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

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Pocket Programmingとは

Pocket Programmingをやってみた

記事を検索

関連するキーワード

関連する記事

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

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

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