2018-05-16

2018年4月7日の「もくもく会」作業目標と成果

もくもく

state：coinspace 神南
date：2018年4月7日 10:00 - 19:00
member：@akome_hero @necomeshi @andesm @zerokfy @akarui_1206 @grwth1009 @anya_an1

目的

android studioを使ってみたい
dockerを使ってみたい

目標

android studioのインストールと日本語化
android appでhello world! @エミュレーター
dockerのインストールと起動
作成したandroid appをdocker上でbuild&エミュレーターで動かす

成果

[Clear]android studioのインストールと日本語化
[Clear]android appでhello world! @エミュレーター
[Clear]dockerのインストールと起動
[Unclear]作成したandroid appをdocker上でbuild&エミュレーターで動かす

docker install

Install Docker for Mac

stable版をインストール
1. docker start で起動
VMを作成する
1. 目的の画面が出てこない（localhost）
2. apacheがいきていたので sudo apachectl stop で殺してから 1. を再度実行するもエラー……

$ docker-machine create --driver virtualbox default
Running pre-create checks...
Error with pre-create check: "VBoxManage not found. Make sure VirtualBox is installed and VBoxManage is in the path"

って言って怒られる。docker for macではHyperKitがいるからVirtualBoxはいらないという話では…？
HyperKitがいるかどうか確認してみましたが普通にいました。

$ HyperKit -v
HyperKit: v0.20171204-60-g0e5b6b
Homepage: https://github.com/docker/hyperkit
License: BSD

そもそもコマンドで virtualbox とか指定しているから悪いんじゃ？
▷これ以上解決せず終了。っていうかコンテナさえ作ってしまえばいいんじゃ……とウダウダした後に気づいた。
dockerの公式ドキュメント読み込みます。

containerを作成

作ったはずのContainerが表示されない〜と思ったけど —all が必要でした

これだと出てこない

$ docker container ls
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

—allをつけることですべてのコンテナが表示される

$ docker container ls --all
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                           PORTS                NAMES
9d0f29b83ef5        hello-world         "/hello"                 33 minutes ago      Exited (0) 33 minutes ago                             angry_visvesvaraya
687d0ecb0013        nginx               "nginx -g 'daemon of…"   About an hour ago   Exited (255) About an hour ago   0.0.0.0:80->80/tcp   optimistic_dubinsky

※dockerコマンドは@curseoffさんの投稿を参考にしました Dockerコマンドメモ

android studio

Android Studio Android の公式 IDE Pleiades - Eclipse プラグイン日本語化プラグイン

3.0をインストール
pleiadesをダウンロード
新規プロジェクト作成
- 最初からhello worldが入っていた
- エミュレーターからの実行
  - エミュレーター起動→待受→アプリアイコン→アプリ起動→hello world確認
- どこでhello worldが定義されているのか
  - activity_main.xml
  - GUIからもxmlテキストでもコンテンツを配置できる
- 上記を踏まえ、ボタン押して画面遷移するようなhelloworldアプリを作成した
  - 入力を遷移先で出力するようなもの
githubとの連携
- ログイン
- 既存リポジトリへのcommit
- android studio上では出来たよ！ってメッセージが出ているけど、github.comではcontributionが表示されてないのでうまく言っていないみたい……→あとで調査必要（どこにcommitしたのよわたしは……）

▼成果物 - とりあえず動いたのには満足（1.8倍速）

f:id:azix:20180516172659g:plain

お昼にまとめたこと（11:45~14:35はもくもくを抜けていました）

転職理由と志望理由
- お金がないよ
- 開発したいよ
- 上流工程もやってみたいよ
職務経歴書をまともな感じに書き直すよ
- マルチタスクエンジニアとしてやってきたよ
強みとやりたいこと・やれること
- なんでもサクサク人並みに覚えてやれるよ
- フロントエンドが強いよ
- サーバーサイドでわちゃわちゃできるようになりたいよ
- 作ったサービスが有るよ←これからだね。

★後日きちんとした経歴書を作ることになりました。

2018-05-15

Laravel Mixを使おう！

laravel mix laravel PHP

laravel mix とは

一言で言うと、

web packの設定を簡単に書くことができるlaravel向けのnpmパッケージ

なのですが。これ言われても意味わかんなかったので噛み砕きます。分かる人は飛ばして。

web packはwebコンテンツを構成するJavaScriptやSassなどのリソースを モジュール と言う単位で取り扱い、
複数のモジュールを1つにまとめたファイルを出力・最適な形に作り変えてくれるツールです。
（例：３つのJavaScriptをまとめて１ファイルの呼び出しで良いようにしてくれる）
ざっくり言うと リソースの依存関係を解消してくれるコンパイラ です。

導入方法

導入にはグローバルインストールとローカルインストールがある。
グローバルインストールはwebpackを利用したいディレクトリ（プロジェクト）以外の 全ての環境に影響を及ぼす ので各自よしなにお願いします。

グローバルインストールの場合

cd ~/
npm install webpack -g

ローカルインストールの場合

cd [目的のプロジェクトルート]
npm install --save-dev webpack

（必要ならば）足りないパッケージを補うため以下のコマンドを実行

npm init -y

使用方法

準備

node/npmをインストール（yarnでもOK）
Laravel 5.* のプロジェクトを作成
npm installを実行
プロジェクトルートに「webpack.mix.js」があるのでコンパイルの対象を追加（JSファイルやSassファイルなど）

// mix.js('ビルド元のソースコード', 'ビルド済みファイル出力場所')
// 例
mix.js('resources/assets/js/common.js', 'public/js')
    .js('resources/assets/js/sub.js', 'public/js')

viewでの呼び出しを追加

<!-- これで上記２つのjsが読み込まれる -->
<head>
   <script type="text/javascript" src="{{ mix('js/common.js') }}"></script>
</head>

実行

npm run dev

f:id:azix:20180515182735p:plain こんな感じの結果で、 DONE が表示されていたら成功！

jsやcssを即時でコンパイルしたい場合（書きながらすぐ反映させたい時）

npm run watch

終わらせるときは ctr + C でOK.

2018-05-14

gitで新規リポジトリを作ったときの公式案内の説明

Git

gitではじめてリポジトリ作ったときに、公式サイトに書かれている手順の意味がわからなくて「？？？」ってなりながらやったことがようやく分かるようになったのでメモ。

まず何が書かれているのか。

これは私のGitアカウントに新しくリポジトリを作ったときの画面です。 f:id:azix:20180514180543p:plain

大きな４つの項目がありますね。

Quick setup — if you’ve done this kind of thing before
…or create a new repository on the command line
…or push an existing repository from the command line
…or import code from another repository

それぞれこんなことが書いてあります

セットアップをしたことあるならさっさとやっちゃおう！＋必要情報
コマンドラインから新しいリポジトリを作る方法
コマンドラインから既存のリポジトリをプッシュする方法
他のリポジトリからコードをインポートする方法

で、解説していきます。１はほかが出来たら「アッソ。」になるので割愛。

2. コマンドラインから新しいリポジトリを作る方法

echo "# ReDarekaDiary" >> README.md
→今いるディレクトリにREADME.mdというファイルを作って底に「””」の中の文を書き込む

git init
→今いるディレクトリにgitのリポジトリを追加する。「.git」というディレクトリができ、この中にGitの管理ファイルが作成される（既存のディレクトリでのリポジトリの初期化）

git add README.md
→コミットするファイルにREADME.mdを追加する

git commit -m "first commit”
→コミットする。 （-m “ここがコミットコメントになる”）

git remote add origin https://github.com/AsahiNakamura/ReDarekaDiary.git
→URLに"origin"という短縮名(ニックネーム)を付ける（.git/config内の「remote」項目に定義される）

git push -u origin master
→originサーバへ今いるディレクトリの中身をデフォルトのブランチとしてアップロード（push）する（-uオプションを付けると次回から「git push」だけでorigin masterでpushしてくれる。）

3.コマンドラインから既存のリポジトリをプッシュする方法

git remote add origin https://github.com/AsahiNakamura/ReDarekaDiary.git
→URLに"origin"という短縮名(ニックネーム)を付ける（.git/config内の「remote」項目に定義される）

git push -u origin master
→originサーバへ今いるディレクトリの中身をデフォルトのブランチとしてアップロード（push）する（-uオプションを付けると次回から「git push」だけでorigin masterでpushしてくれる。）

4.他のリポジトリからコードをインポートする方法

特にコマンドは書かれていないけれど、やることは「リポジトリをクローンする」こと。
コマンドだと git clone [url] を使います。

まとめ

自分で何か作るんだったらだいたい１のやり方だと思うし、チームで何かやるんだったら３が多いんじゃないかなと思います。頑張って覚えるぞ！！

あじちゃんの備忘録。

〜ここはメモ帳です