【Win / Mac両用】超環境構築シート 仮想マシン設定編

※ 初回のみ実行すべき事項には (初) マークをふってあります。
※ ターミナルではvagrantを使ってcentosへsshログインしている状態が前提条件です。
※ centos上での作業事項には (CentOS) マークをふってあります。

1.root権限ユーザーになる (CentOS)

※パスワードはvagrant

2.OSのパッケージを最新にする (CentOS) (初)

※途中でエラーが出た場合は下記コマンドを実行し、再度yum updte -y を実行して下さい。

3.基本的に開発において必要とされるファイル群をインストール (CentOS) (初)

4.サーバーを日本語化 (CentOS) (初)

5.ファイアウォール(iptables)を切っておく (CentOS) (初)

6.マシンを再起動 (CentOS) (初)

7.LAMP環境構築準備 (CentOS) (初)

8.Apacheをインストール (CentOS) (初)

9.MySQLのインストール (CentOS) (初)

10.MySQLの基本設定 (CentOS) (初)

そのままEnter
Yと打ってEnter
mysqlと打ってEnter
mysqlと打ってEnter
Yと打ってEnter
Yと打ってEnter
Yと打ってEnter
Yと打ってEnter

11.PHPMyAdminのインストール

設定ファイルの一部を編集します

12.PHP5.5のインストール (CentOS) (初)

13.PHPの設定を編集

下記資料の「PHPの設定を編集」部分の「エラー表示の設定を変更」部分実行
http://qiita.com/knife0125/items/0e1af52255e9879f9332#php%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E7%B7%A8%E9%9B%86
CentOSの時刻設定

14.PHPの時刻設定

873行目あたり「date.timezone = 」のコードを「date.timezone = ‘Asia/Manila’」に修正

15.Hello World

下記を記述

Apacheを再起動

ブラウザで確認
192.168.33.10/index.php にアクセス
Hello Worldが表示されればok

【Mac編】超環境構築シート 仮想マシン作成

※ 初回のみ実行すべき事項には (初) マークをふってあります。

VagrantにBoxファイルを登録 (初)

boxファイルを事前にダウンロードしている場合

boxファイルがない場合

Vagrantで仮想マシンを作成 (初)

Vagrantfileを編集して仮想マシンの設定を変更 (初)
/Desktop/virtual_box/001_centos65/Vagrantfileをsublime textで開き、下記を修正 or 追加

Vagrantサーバを起動

Vagrantサーバに接続

【Windows編】超環境構築シート 仮想マシン作成

※ 初回のみ実行すべき事項には (初) マークをふってあります。

VagrantにBoxファイルを登録 (初)

Vagrantで仮想マシンを作成 (初)

Vagrantfileを編集して仮想マシンの設定を変更 (初)
/Desktop/virtual_box/001_centos65/Vagrantfileをsublime textで開き、下記を修正 or 追加

Vagrantサーバを起動

Vagrantサーバに接続
Tera Term起動
下記リンクより 2)TeraTermからのアクセス を参考にsshログイン
http://qiita.com/hiroyasu55/items/11a4c996b0c62450940f#2teraterm%E3%81%8B%E3%82%89%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9
番外編
vagrant upまたはssh接続ができない方
仮想化支援機構やHyper-Vを有効化する必要があります。
担当講師に相談し、下記リンクを参考に解決してください。
http://qiita.com/hiroyasu55/items/11a4c996b0c62450940f
http://ascii.jp/elem/000/000/913/913933/index-2.html

win8

【Windows, 開発環境】Windowsで開発するためにインストールしておきたいアプリまとめ

NexSeedの「エンジニア留学」ではWebコースとiOSコースを用意しており、WebコースではWindows,Macを開発PCとしてご利用頂いております。

今回はWindowsを開発環境としてNexSeedにエンジニア留学に来られる方にインストールして頂いているアプリケーションを紹介します。ほぼ授業内で使用するアプリであるため、渡航前にインストールし、試しに使用してみることをおすすめしています。

開発ツール

Sublime Text2

プログラムを書くときにはコードを書くためにテキストエディタという、プログラムのソースコードを編集するための文字編集ソフトが必要です。
現在エンジニア・デザイナなどの仕事をする人にとって、一つ代表的なテキストエディタであるSublime Text2をインストールしておくことをおすすめします。
http://www.sublimetext.com/

Sublime Text2

FileZilla

プログラムを書いて動作させるときには、サーバというプログラムを動かすためのマシンに書いたソースコードをアップロードして動作させます。
その際にFTPクライアントという、ご自身のパソコンで作成したプログラムをサーバにアップロードするためのツールを利用するのですが、無料で便利に使えるFTPクライアントのFileZillaが便利です
https://filezilla-project.org/download.php?show_all=1

FileZilla

Tera Term

エンジニアはマウスや見た目にわかりやすい画面での作業のみならず、ただ文字だけが並んでいる画面でコマンドと呼ばれる命令をマシンに与えることで作業を行うことがよくあります。
その際、こちらのTera Termを利用すると、より便利にコマンドでの操作がやりやすくなります。
http://tera-term.en.lo4d.com/

tera-term

VirtualBox

Windows上に仮想マシンを構築するために必要になる仮想化ツール。
VirtualBoxをインストールすることで、あなたのPCの上に仮想的にサーバを構築することができ、無料でサーバ開発環境を得ることができます。

https://www.virtualbox.org/
VirtualBox

Vagrant

VirtualBoxの上に仮想マシンを立ち上げるのを自動化してくれるツールです。
VirtualBoxと合わせて利用することで、あなたのPCに仮想サーバを構築することが容易にできます。
https://www.vagrantup.com/
Vagrant

Vagrant Boxファイル

Vagrantで仮想マシンの構築を自動化・簡易にするのですが、その際に立ち上げる仮想マシンのOSの元ファイルとしてBoxファイルというものが必要になります。
ここでは多くの企業でサーバ用OSとして利用されている、CentOSのBoxファイルのダウンロードを推奨します。
(http://nrel.github.io/vagrant-boxes/ より、最上部latestの中からx86_64という文字列が名前に入っているものをダウンロード)

XAMPP

XAMPPは仮想環境を簡単に導入できるプログラム初心者の強い味方です。まずはプログラムを動かすために簡単な手順で仮想環境を手に入れましょう。
バージョン5.5.28をダウンロードして下さい。

ダウンロードはこちらのページから
インストールしコントロールパネルのボタンでソフトのON/OFFが簡単におこなえます。

SourceTree

プログラミングを行っていると、ある一定程度開発した段階でそのソースコードを一時的に保存したいということがよくあります。
そのような際にはGitというツールを使ってそのような一時保存などを行います。
そのGitでの操作をわかりやすくしてくれるツールがこのSourceTreeです。
(https://www.atlassian.com/ja/software/sourcetree/overview よりダウンロード)

SourceTree

MySQLWorkBench

無料で使えるデータベースとしてMySQLは最も有名なデータベースです。
MySQLの開発や保守は現在Oracleが行っておりますが、MySQLを扱うためにオフィシャルツールとして公開されているのが下記MySQL Workbenchです。
データベースを使って開発を行う際にお世話になるので、インストールしておきましょう!
(http://www-jp.mysql.com/products/workbench/ よりダウンロード)

コミュニケーションツール

エンジニアは仕事の現場では、多くの場合チャットでコミュニケーションを行っています。
理由としては、チャットでのコミュニケーションはリプライの強制力などが少ないため、集中している際に作業の邪魔にならないなどのメリットがあるからです。
また、コミュニケーションのログを残しておくという意味でも、チャットなどでテキストベースでやりとりをすることが重要になります。
現在そのようなチャットツールとして世界的に二強といえるのが下記2つのツールになります。
どちらも使ってみる価値があるツールですので、インストールしておきましょう!

Slack

https://slack.com/ よりダウンロード

Slack

HipChat

https://www.atlassian.com/ja/software/hipchat よりダウンロード

HipChat

その他

Kobito

http://kobito.qiita.com/ よりダウンロード
NexSeedのエンジニア留学では授業内のメモを取る際にKobitoを推奨しています。
プログラミングコードが見やすく記載できるだけでなく、マークダウン記法という記述方法でメモを取ることにより情報の整理が身につくという考え方に基づいています。

スクリーンショット 2015-07-11 14.48.11

【iOSアプリ開発】SampleMapKit作成手順

今回はMapKitを使ったサンプルの作成手順をご紹介いたします。

以前のブログ記事、iOSアプリ開発の強い味方、cocoapodsを使いこなそう!で紹介したライブラリJPSThumbnailAnnotationを使う前提として地図を表示するためにMapKitというフレームワークを使用し、地図を表示させる必要があります。

※JPSThumbnailAnnotationを使うとこんな見た目のサムネイル付きピンが作れます
スクリーンショット 2015-01-30 14.30.37

今回、MapKitを使った地図アプリを作成後、上記の記事を読んで頂きライブラリを追加後に、是非ピンのカスタマイズを行ってみてください♪

それではMapKitを使ったサンプルの手順になります。

前提

SingleViewApplicationを選択して作成したプロジェクトであること

1.プロジェクトにMapKitフレームワークを追加

左のツリー表示から青いプロジェクトファイルを選択
Linked Frameworks and Librariesにて『+』ボタンをクリック
現れたウィンドウ上の検索パネルで「MapKit」と検索し、Addボタンで追加

mapkitf

2.ViewController.h に 2点追加

  • #import <MapKit/MapKit.h>
  • <MKMapViewDelegate>

こんな形になります。

3-1.ViewDidLoadにMapKitオブジェクト作成

3-2.ViewDidLoad内で追加したMapKitオブジェクトの中心座標を設定

3-3.ViewDidLoad内で追加したMapKitオブジェクトの地図縮尺を設定

3-4.ViewDidLoad内で追加したMapKitオブジェクトの表示タイプを設定(ピンも1つたてておく)

4.ピンを立てる自作メソッドを作成(ViewDidLoadメソッドの下)

5.自作メソッドを呼び出してピンオブジェクトを作成、ピンを立てる

6.(おまけ)ピンが降ってくるアニメーションを実装したい場合、Delegateメソッドを追加

7.(おまけ)ピンの吹き出しに乗っているinformationボタンをタップした時発動されるメソッドを追加(実際は画面遷移などのコードを書くとよし

操作する対象が動いている場合(今回は落下しているアニメーション)、ユーザーは押したくなるという心理が働き、自然と効果的なUXを提供できるという効果が生まれます。落下させなくてもピンは操作できますが、その一手間を加えるだけでグッと初心者が作ったアプリという印象から抜け出すことが出来ます。なのでおまけの部分はより高い操作性をユーザーに提供したい場合に利用していただくと効果的です。

【ソース管理】SourceTreeで快適ソース管理1

開発に欠かせないソース管理ツール。今回はその中でもSourceTreeというツールの使い方をご紹介したいと思います。

まず、ソース管理とは、複雑なプログラムの開発状況をスムーズに管理し、また円滑にチーム開発などを行うために必須な作業となります。

前提

・XCodeのプロジェクトが存在している
・Githubアカウントを持っている

ソース管理ではいろいろなコマンドが用意されているのですが今回は基本的なコマンド
・Commit
・Push

について説明しつつ、SourceTreeの使い方を説明していきます。

まず、XCodeで今回ソース管理する対象の「SampleTree」というプロジェクトを作成します。このときファイルをどこへ保存するか聞かれるタイミングで、Source Controlに関するティックが、図のように下部に現れます。これを図の通りのままにして、プロジェクトを作成してください。
スクリーンショット 2015-03-27 14.14.03

ここで、「Create Git Repository」という言葉が出てきました。
実は、このティックをつけることでローカルリポジトリファイル(.git)を作ることができます。

リポリジトリとは?

.gitは隠しファイルなのでFinderで見ても存在するかわかりません。
ターミナルで隠しファイルを表示するオプションをつけてlsコマンドを実行することで確認できます。
スクリーンショット 2015-03-27 14.26.29

リポジトリファイルとはソース管理の基となるファイルで、「貯蔵庫」という意味になります。
ここにプロジェクト全体の変更点を保存しておき、ファイルをある時点の状態に戻したり、履歴を確認したりすることができるようになります。

リポジトリファイルにも2種類あり、
・ローカルリポジトリ
・リモートリポジトリ

というリポジトリファイルが存在します。

ローカルリポジトリ

作業中のPC内に存在するリポジトリファイルです。CommitというGitコマンドを使って、変更点の履歴を保存していきます。今回はXCodeでローカルリポジトリを作成した状態からSourceTreeで操作を行います。

リモートリポジトリ

ソースを管理する為のサーバー上に存在するリポジトリファイルです。PushというGitコマンドを使って、ローカルリポジトリの履歴をサーバー上にUploadし保存することが可能です。今回はリモートリポジトリの保存場所として「Github」というホスティングサービスを利用していきます。

GitコマンドとSourceTree

ソース管理をおこうなう専用のコマンドです。使用するにはPCにGitソフトをインストールする必要がありますが、XCodeがインストールされているMacでは既にGitもインストール済みなのでXCodeがインストールされているMacには改めてインストールする必要はありません。Gitコマンドは通常、ターミナルからコマンドライン(CUI)ベースで実行するものなのですが、Gitコマンドを見やすい形で操作するためのツールがSourceTreeになります。

SourceTreeはこちらのサイトからダウンロードが可能です。

SourceTreeにプロジェクトを追加する

早速実際に使ってみましょう。
起動し、「新規リポジトリ」ボタンを押し、「既存のローカルリポジトリ」をクリックします。
スクリーンショット 2015-03-27 15.33.07

次に、用意しておいたSampleTreeプロジェクトのフォルダを指定し、開きます。
スクリーンショット 2015-03-27 15.40.11

そうするとSourceTreeの初期表示リストにSampleTreeプロジェクトが追加されたことを確認できます。
スクリーンショット 2015-03-27 15.46.38

Commit

ここから、プロジェクトの変更をSourceTreeを使用してCommitしていきます。
まず、コンソールにHello,World!とだけ表示するプログラムをViewControler.mというファイルに記述し、ファイルを変更しておきます。
そのあと、SourceTreeを開き、SampleTreeプロジェクトをダブルクリックすると下の図のように、変更点を確認できる画面が表示されます。
スクリーンショット 2015-03-27 16.09.25

変更点を保存するために「作業ツリーのファイル」にティックをつけると変更点のあるファイルが全て「ステージされたファイル」の方へ移動します。(ファイル個別に移動することも可能です)
スクリーンショット 2015-03-27 16.13.29

コミットするためにはメッセージを記載する必要があります。記載しようとすると、下記のような画面が表示されます。
スクリーンショット 2015-03-27 16.20.34
ここでの「コミットに紐づくユーザー情報」というのはGithubアカウント情報になります。事前にGithubでアカウントを作成しておきその情報を入力しておきましょう。

アカウント情報を入力するとメッセージが記載できるようになるので記載してコミットボタンを押します。これでローカルリポジトリに変更点を保存しておくことができました。
スクリーンショット 2015-03-27 16.23.40

Push

ローカルリポジトリにコミットがたまったら、次はそれをリモートリポジトリにPushしましょう。チーム開発で複数人で共有する場合、またバックアップの観点からも定期的なPushが必要です。
Pushを行うにはまずローカルリポジトリとリモートリポジトリの紐付けを行います。

最初にGithubにログインしてからのリモートリポジトリを作っておきましょう。ここでは前提として「https://github.com/ei17ringo/sampletree」というリモートリポジトリを用意しています。

下図の設定ボタンをクリックして、リモートリポジトリを指定します。
スクリーンショット 2015-03-27 18.49.50
スクリーンショット 2015-03-27 19.01.25

設定が終わった後は、pushを押します。下記画面で左端のティックをつけてOKを押すと完了です。
スクリーンショット 2015-03-27 19.05.04

【iOSアプリ開発】SampleiAd作成手順

現在開発中のiOSアプリに広告を入れようとする際、その方法やメディエーションはいくつか選択肢があります。

その中でもApple純正メディエーションiAdの導入方法を今回はご紹介したいと思います。

iAdって何?と思われた方は下記リンクを御覧ください。
http://ja.wikipedia.org/wiki/IAd

  • 前提:SingleViewApplicationを選択して作成したプロジェクトであること

1.プロジェクトにiAdフレームワークを追加

  • 左のツリー表示から青いプロジェクトファイルを選択
  • Linked Frameworks and Librariesにて『+』ボタンをクリック
  • 現れたウィンドウ上の検索パネル「iAd」と検索し、Addボタンで追加

72c6f80e-1d2e-d0c0-ceec-50afe7d5e8b8

2.ViewController.h に 2点追加

  • #import <iAd/iAd.h>
  • <ADBannerViewDelegate>

こんな形になります。

ViewController.h

3.メンバ変数 _adView を追加

ViewController.m

4.ViewDidLoadの中にバナーを画面上部に隠しておく形で設置するコードを記述

ViewController.m

5.バナー表示が成功したら発動するDelegateメソッドbannerViewDidLoadAdをViewDidLoad下に追加

ViewController.m

6.バナー表示が失敗した時に発動するDelegateメソッドdidFailToReceiveAdWithErrorもbannerViewDidLoadAd下に追加

ViewController.m

7.バナーが画面上に表示されているか否かを判別するフラグ_isVisibleをメンバ変数で用意

ViewController.m

8. viewDidLoadではまだバナー表示されていないためNOを設定しておく

ViewController.m

9. bannerViewDidLoadAdに_isVisibleを判別し、表示されていない時だけ表示する処理が実行されるようなif文を追加

  • 表示処理後は_isVisible = YESにセット
ViewController.m

10. didFailToReceiveAdWithErrorに_isVisibleを判別し、表示されている時だけ非表示にする処理が実行されるようなif文を追加

ViewController.m
01_PHPMyAdmin

【PHPMyAdmin】PHPMyAdminのインストール

前提

  • CentOSデフォルトyumでのLAMP環境を想定しています(PHP 5.1.73, MySQL5.1.73)
  • Vagrantで開発環境を構築している前提で記述しています

PHPMyAdminウェブサイト

【オフィシャルページ】
http://www.phpmyadmin.net/home_page/index.php

【ダウンロードページ】
http://www.phpmyadmin.net/home_page/downloads.php

PHPMyAdminをインストールするサーバへ接続

PHPMyAdminをダウンロードしてインストール

ブラウザからサーバにアクセスしてPHPMyAdminが動作していることを確認

下記のような画面が表示されるようになっていればPHPMyAdminが正常に動いています!

01_PHPMyAdmin

【MySQL, SQL】データベースを扱う基本SQL一覧

前々回までの記事でLAMP環境の構築、PHP, MySQLの構築方法・基本的な設定までを紹介しました。
今回は、データベースを扱うための言語であるSQLの基本的な使い方について紹介します。

データベース操作

データベースに接続

  • -u —– 「ユーザを指定する」というオプション
  • -u root —– 「rootユーザで」という意味
  • -p —– 「パスワードを指定してログインする」というオプション

データベース一覧の表示

mysql_01.png

データベースの作成

mysql_02.png

データベースの削除

mysql_03.png

使用するデータベースの選択

mysql_04.png

テーブル操作

前提

利用するデータベースをUSEで選択している必要があります。

ひとこと

プログラムでデータを扱う際には、CRUD(Create, Read, Update, Delete)の四つの処理を正確に行うことが大切になります。
SQLというデータベースを扱う言語では、このCRUDの処理をそれぞれ「INSERT, SELECT, UPDATE, DELETE」という四つの構文で行うようになっています。
SQLではこの四つの構文をどれだけ使いこなせるかが重要になるので、まずは下記に紹介するような基本的な構文をマスターしましょう。

テーブル一覧の表示

mysql_05.png

テーブルの作成

mysql_06.png

CREATE TABLE文を確認

テーブルにデータを挿入(INSERT)

mysql_08.png

テーブルからデータを取得(SELECT)

データがない場合

mysql_07.png

データがある場合

mysql_09.png

抽出するデータを一部にする

usersテーブルから、idとnameだけを取得する。

mysql_10.png

条件つきでデータを取得

mysql_11.png

複数の条件で絞り込んでデータを取得

mysql_12 .png

並べ替えてデータを取得

mysql_13.png

mysql_14.png

データを更新(UPDATE)

データを更新

[更新前]
mysql_15.png

[UPDATE文発行]
mysql_16.png

[更新後]
mysql_17.png

データを削除(DELETE)

データを削除

[削除前]
mysql_18.png

[DELETE文発行]
mysql_19.png

[削除後]
mysql_20.png

まとめ

今回はデータベースを扱う基本的なSQLの紹介を行いました。
次回は、データベースGUIで簡単にブラウザから扱うことのできるPHPMyAdminというツールのインストールのプロセスを紹介します。

スクリーンショット 2015-01-27 19.15.08

【iOSアプリ開発】iOSアプリ開発の強い味方、cocoapodsを使いこなそう!

iOS開発を行う際に、すでに偉大な先人のエンジニアたちからお力を借りたいなと思う時があります。例えば地図のピンをカスタマイズして写真が出たりしたら…もっとカッコイイアプリになるのになぁ〜と思うことはよくあると思います。そんなときに役立つのが「ライブラリ」。ライブラリを追加することで、便利な機能を機能単位でアプリに追加し使えるようになります。

今回はそのライブラリを追加するときに便利なツールcocoapodsの使い方を紹介させていただきたいと思います!

前提

  • sudo gem install cocoapods でcocoapodsを使えるようにインストールしておく
  • SampleAddLibraryという名前のプロジェクトを作成しておく
  • プロジェクト作成後はXcodeを閉じておく
  • 今回追加に使用するライブラリはJPSThumbnailAnnotation

【参考】

http://jpsim.com/JPSThumbnailAnnotation
http://cocoapods.org/

※JPSThumbnailAnnotationを使うとこんな見た目のサムネイル付きピンが作れます
スクリーンショット 2015-01-30 14.30.37

1.ターミナルでプロジェクトフォルダに移動(cdコマンドを使用)

今回はSampleAddLibraryというプロジェクトを作成したので、そのフォルダまで移動します。
(赤い下線の部分が打ち込んだコマンドです)

blog1

2.pod init コマンドを実行

blog2

3.Podfileができていることを確認(lsコマンド)

同じフォルダにさっきまではなかったPodfileというファイルが出来上がっています。
(2.の赤い楕円部分参照)

4.ライブラリのUsage等で指示されている内容を入力(nano Podfile)

nano Podfile

というコマンドを実行しテキストエディタモードにします。

今回追加するJPSThumbでは、

pod ‘JPSThumbnailAnnotation’

というテキストをPodfileに追加せよ、と指示が出ているので指示通りに記述します。

blog3

5.pod install コマンドを実行

下記のように画面にメッセージが出てきたらOKです。(エラーが出た場合、ネットの環境が悪いことが考えられるので時間を置いて再度pod installコマンドを実行してください)

blog4

6.プロジェクト名.xcworkspaceファイルができていることを確認

今回はSampleAddLibrary.xcworkspaceができているか確認します

blog5

次回からは、SampleAddLibrary.xcworkspaceをクリックしてプロジェクトを開くと、ライブラリの機能を使えるようになります。