インターンシップへ行って学んだこと
PCを掃除していたら，インターン期間中のメモが出てきたのでここへ記録します．
私は，2017年の 8月17日 から 9月6日 まで モイ株式会社へインターンしてきました．
モイ株式会社は，ツイキャスを中心としたサービスを展開している会社です． 最近，LIVE配信サービスが乱立していますが，ツイキャスは2010年からサービスを提供してるいわば古参です． これだけ長く続いているものはとても珍しいと思います．UstreamはIBMに買収されちゃいましたからね．
インターンの概要
僕が参加したときのものなので，あくまで参考程度に読んで下さい．
まず，自己紹介をします．みなさん好きな言語などを紹介していてエンジニアだなぁと思いました．（僕はJavaScriptが好きと答えました．）
その後，ハッカソンがありました．「1日でツイキャスのAPIを利用した何かを作る」が課題で，僕はiOSアプリケーションを作成しました．
ここでの発表と制作物から判断され，チームが組まれました．
このまま3週間程度チーム開発です．（途中にツイキャスのサポートや歴史についてのお話もありました．）
最終日に成果発表して終了です．
インターンで学んだこと
他人が読んで分かるコードにしよう
自分しか見ないコードを書く時，ついつい面倒になって短い変数名や雑な処理方法を書いてしまいがちです．そのようなコードは，3ヶ月後自分が読んでも理解できなくなっています．コードを書く時は，常に読みやすいコード（他人が読んで分かるコード）を書きましょう．
この話を聞いたとき，「 O'Reilly Japan - リーダブルコード で読んだことと同じだ！」と思いました．
他人が読んでわからないコードは，いずれ自分も読めなくなってしまうということを実感しました．
言語，ライブラリの選定
例えば，自分が一つの言語/ライブラリ しか知らなかったとします．するとどうしても，それを用いたいという気持ちが生まれます．
他の言語を使う方が，より簡単, より早く, より分かりやすく なるかもしれません．
複数言語を知っていると，なぜその言語を使うのかと考えることができます．
ひとりのエンジニアとして
エンジニアとして正しくあるべきです．例えば，公平な選定をしましょう．
チーム開発時に 個人的な理由で，言語 / ライブラリ を選定し仲間に強要するのはダメです．
絵文字を用いることで表現がまろやかに
この話を聞いた時衝撃的でした．絵文字は，"ワカモノ" が使う謎のツールという認識が当時の僕にはあったからです．
チーム開発をしていく上で，コードのレビューなどのコミュニケーションは欠かせません．そこで，文章だけで連絡を取り合うとどうでしょうか？ キツい言い方をされたと相手が受け取り，お互いが嫌な気持ちになってしまうかもしれません．絵文字があることによって，表現の幅が増えてまろやかに伝えることができます．👍
テストは大事
テストを書くことによって，意図した動作がされているのかの確認ができます．CIツールというものもあることを知りました．
テストを書くことはきれいなコードを書くことにもつながります．テストがしにくいコードは，煩雑なものであったりする場合が多いです．
余談として TDD というものも教えていただきました．
テスト駆動開発 - Wikipedia
タスク管理しよう
タスク管理することによって進捗を判断することができます．
期限が決まっているものの場合，進捗状況をみながら完成物の調整などをすることができます．
GitHub の使い方を知る
私は 高校のころからプログラミングをしていますが，このインターンに参加するまで ソースの管理はいつもフォルダ分けしていました．
普段のプログラミングは１人で行っていて，誰かに見せるコードも無かったためこのようにしていました．
GitHubというサービスの存在は知っていて，ソース管理ができるということまで理解していました．しかし，コマンドがなかなか覚えられない / 自分のコードを他人に見せる必要が無いと思い利用していませんでした．インターンに参加するまで，git add ., git commit と git push ぐらいのコマンドしか知りませんでした．
インターンでは，チームで開発を行っていました．そのため，コードの共有やレビューが発生します．GitHubの使い方 / Gitの使い方はインターン終了時には実務で使うには問題が無いレベルにまで成長することができました．
クレーマー = 怒っている人ではない
クレーマーというと一般的に怒っている人という印象を持ってしまいがちですが，全員怒っている人というわけではありません．
利用していて何か問題があるから伝えに来ています． その問題をまず把握することによって，解決の糸口を探していくことが大切だと理解しました．
ユーザーをよく見よう
ユーザーを見ることによって，そのサービスのどのあたりに価値があるのか 改めて知ることができます．
その価値を捨てること無く，サービスを提供し続けることができればとても良いことです．
低レイヤーを知る
低レイヤーを知っていることで，アプリケーションの作成をするときに役立ちます．
実際に動かそう
サーバーなど，どのような設定をすると自分の思った通りに動作するのかということを知るには，動かしてみるのが一番です．
仮想マシンなどを用いて実際に動かして設定してみると良いです．
実際に動かすことによってより理解が深まります．
このことは，どの分野においても言えることだと思います．私はネットワークを勉強する際，実際にサーバを借りてウェブサイトを作って理解しました．理論で何度も勉強するより，一度やってみると案外すぐに理解することができるかもしれません．
インターンへ参加することによって，実際の社会ではどのような手法で開発されているのか．何を考えてサービスが作られているのかを知ることができました．このインターンは僕の人生にとって，大きな影響を与えると思います．
ぜひ皆さんもインターンへ参加してみてください．
最後に，今ツイキャスでは誕生日キャンペーンやってるみたいです．ビーズクッション欲しい...
CTFやってみた
今日，このようなイベントがありました．
ここで，CTFをしてきました．
このCTFは初歩だということで，CTF初心者の僕にちょうど良いです．
前提
今回のCTFでは，UNIXコマンドを使います． なので，Linuxを使えるようにしましょう．
CTFではおなじみの，Kali Linuxというものをインストールします．
インストール方法は検索すれば簡単に見つかるので，省略．
https://qiita.com/mah-nyan/items/754206330c0d43c71935
実際に解く
Kali Linuxを使って OverTheWire: Bandit を解いていきます．
Level 0 → Level 1
この問題は，sshするという問題です．普通に，ポートを指定してsshします． Kali で端末を開いて，
ssh bandit0@bandit.labs.overthewire.org -p 2220
すると，readmeというファイルがあるので，
cat readme
これが次のパスワードです．
Level 1 → Level 2
新しく端末を開く，もしくは exit して bandit1 でログインします．パスワードは，マウスでコピペすると簡単に入力ができます．
ログイン後，lsをすると - という名前のファイルがあります． cat - としても見ることができないので，
cat ./-
これで表示されます．
Level 2 → Level 3
lsをすると， spaces in this filename というファイルが出てきます． このファイルをcat すれば良さそうですが，普通に入力するとダメなので，スペースをエスケープしてあげる必要があります． なので，
cat spaces\ in\ this\ filename
Level 3 → Level 4
lsをすると，inhereというフォルダがあるので，中に入ります．
cd inhere
再びlsをしてみますが，中に何もありません． もしかしたら，隠しファイルがあるかもしれないので，
ls -a
.hiddenというファイルがあるとわかります． なので，
cat .hidden
Level 4 → Level 5
先程同様 inhereに入って，lsをします． -file00 ~ -file09 というものがあります．
とりあえず，cat で -file00 を見てみると，
cat ./-file00
文字化けしたようなものが出てきます． 人間が読めるものが出てくるものがあるはずなので，確認します．
file ./*
すると，-file07だけ ASCII text と出てきます．なので，
cat ./-file07
Level 5 → Level 6
inhereに入ると，大量のディレクトリが出てきます． この中から，1033 bytes のものを探します．
find -size 1033c
すると， ./maybehere07/.file2 と出て来るので，
cat ./maybehere07/.file2
Level 6 → Level 7
somewhere on the server と書かれているので，全体から探します． 検索するものは，user が bandit7，group が bandit6，size が 33 bytes なので，
find / -user bandit7 -group bandit6 -size 33c
Permission denied のファイルも出てきているので，
find / -user bandit7 -group bandit6 -size 33c 2>/dev/null
出てきたものをcat すればOK
cat /var/lib/dpkg/info/bandit7.password
Level 7 → Level 8
lsをすると，data.txtというものがあり，この中から "millionth"が入った単語を探します．
grep millionth data.txt
すると 一つだけ表示されるので，これが bandit8のパスワードです．
Level 8 → Level 9
一回だけ出てきているものを探します．なので sortした後，uniqなものを表示します．
sort data.txt | uniq -u
Level 9 → Level 10
file data.txt
をすると，形式がdataとなっています． そのため，stringsコマンドで文字にします． また，連続する=が含まれているということなので，
strings data.txt | grep ==
Level 10 → Level 11
data.txtはbase64でエンコードされているらしいので，デコードします．
base64 -d data.txt
Level 11 → Level 12
問題文に13文字ぶんずらしていると書かれています． ということは，aがn, zがmなので，
cat data.txt | tr ‘[a-zA-Z]’ ‘[n-za-mN-ZA-M]’
この問題，メンバーはpythonで解いていたみたい．
ここで，時間が終わってしまいました．
感想
問題が解けたときの快感が凄まじいです．
次 何をすれば雰囲気が分かるので，man でどのようなオプションがあるのか見ると，大体理解できます．（それでも分からなければGoogle先生に）
あと今回，グループでこのCTFをしていたので，わからないことを気軽に聞けた点がとても良かったです．
CTF少し勉強してみようかな...
ではでは👋
[追記]
しゃしん氏が，level 20までの解き方を載せてくれています．
プロ生ちゃん回してみた．
この記事は，プロ生ちゃん Advent Calendar 2017 7日目の記事です．
2017年もあとすこしとなってきました．
今年を振り返るといろいろなことがありました．
「5000兆円欲しい」や「けものフレンズ」，「ハンドスピナー」が話題になりました．
ハンドスピナー...!?
ということで，プロ生ちゃんをハンドスピナーの如く回転させました！！！
(；´Д｀) < 強引すぎる
→ https://ipolyomino.github.io/pronama_spinner/
webでできるハンドスピナーは，うおた氏が作成されていました．
ハンドスピナーが欲しすぎるので作った スマホで遊べます! https://t.co/07EdovMXFk pic.twitter.com/qEWhXcVIbn
— うおた (@uo_ta) 2017年5月28日
そこで，どんな方法で回転させているのか気になってソースを確認してみると，JQueryRotateというものが使われていました．
JQueryRotateは，かなりシンプルに書くことができるようです． 例えば，50msごとに3度回転だと，
var angle = 0; setInterval(function(){ angle+=3; $("#img").rotate(angle); },50);
とてもシンプルで良いですね．
同じ方法でプロ生ちゃんを回転させても良いのですが，面白くないので別の方法を探します．
生のJavaScriptで書いてみた．
html5からcanvas 要素というものが追加されています．
HTMLの canvas 要素 と Canvas スクリプティング API を使用して、グラフィックスやアニメーションを描画することができます。
要するに JavaScriptを用いて，canvas内の様子を設定することができるというものですね．
今回のように，回転させたりするときに用いると便利なタグです．
コード
const canvas = document.getElementById('normal_canvas'); canvas.height = 300; canvas.width = 300; const context = canvas.getContext('2d'); const image = new Image(); image.src = 'image/money.png'; image.onload = () => { rotate(); } let theta = 0; function rotate() { context.clearRect(0, 0, canvas.width, canvas.height); context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.rotate(++theta * Math.PI / 180); context.translate(-canvas.width / 2, -canvas.height / 2); context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); context.restore(); setTimeout(rotate, 15); }
．．．(´・ω・｀)
imageが読み込まれたイベントを取得して，画像を表示．
画像を表示するときには，widthとheightを取得してcanvasの大きさに合わせる．
回転の中心をcanvasの中心にして，再描画．
この回転させる関数を定期的に呼び出して...
辛すぎワロタ
JQueryRotateなら数行で書けたものを，生のJavaScriptだと，数倍書かないといけないです．
もっと，うまいことcanvasに再描画して欲しいです．
Grimoire.js で書いてみた．
Grimoire(グリモア).jsとは，Web開発のためのWebGLフレームワークのことです．
もう少し詳しく書きます． まずWebGLについて，
WebGLとは，Web Graphics Libraryのことで，Web上でインタラクティブな2D/3Dグラフィックスをレンダリングするための JavaScript API です．
極端に言えば，Web上で綺麗な2D/3Dを出す技術の一つです．
WebGLの例は，http://webglsamples.org/ を見るとたくさんあります．
このWebGLは見ていて綺麗ですが，かなりいろいろ考えて作る必要があるので大変です．（ threejs でググってみると面白いかも）
そこで，Grimoire.js です．
Web開発の中にWebGLを簡単に取り入れることができます．
［参考］
- Grimoire.js - WebGL framework for Web development -
- WebGL - Web API インターフェイス | MDN
- three.js - Javascript 3D library
ということで，Grimoire.js でプロ生ちゃんを回してみます．
コード
gr.registerComponent('Rotate2d', { attributes: { speed: { default: 1, converter: 'Number' } }, $mount: function () { this.theta = 0; }, $update: function () { this.theta += this.getAttribute('speed'); this.node.setAttribute('rotation', 0 + ',' + 0 + ',' + -this.theta); } });
少しJavaScript を触ったことがある人なら，大体何をしているのかすぐに分かると思います．
Grimoire.jsは，WebGLのフレームワークです．2Dの回転ではなく，3Dの回転も簡単できます！
gr.registerComponent('Rotate3d', { attributes: { speed: { default: 1, converter: 'Number' } }, $mount: function () { this.theta = 0; }, $update: function () { this.theta += this.getAttribute('speed'); this.node.setAttribute('rotation', 25 + ',' + -this.theta + ',' + 0); } });
canvas内の状態は，.goml というファイルで管理しているので，context.drawImage などはする必要ありません．
興味があれば，ソースコードを公開しているのでぜひこちらから試してみてください．
実際に動くもの
https://ipolyomino.github.io/pronama_spinner/
ではでは👋
ウェブサイト作ったときのメモ
サーバー関係で調べたことメモ．
主にセキュリティのことについて．
www.websec-room.com tylermade.net
sshチェックするやつ
SSL証明書の発行
ログを確認するために少し変更
デフォルトでログに残る情報が少ないので． qiita.com
サイト管理系で調べたこと
Search Consoleへの登録
クロールの状態とか確認できる．
www.google.com
モバイルフレンドリーテスト
モバイルで見るとどうか分かる
https://search.google.com/test/mobile-friendly?hl=ja
Googleアナリティクス
サイトのアクセス数とか簡単にわかる
https://analytics.google.com/
PageSpeed Insights
表示速度，改善すべき場所を確認できる．
PageSpeed Insights
HTML5 Security Cheatsheet
セキュリティ
https://html5sec.org/
Webサイトをセキュアにするための7つ道具
Webサイトをセキュアにするための7つ道具 / 7 tools for Web Applications security // Speaker Deck
上記スライドのリンク
- サイバーセキュリティ経営ガイドライン（METI/経済産業省）
- OWASPアプリケーションセキュリティ検証標準
- File:Web application security requirements.pdf - OWASP
- 安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構
- Pentester Skillmap Project JP - OWASP
- ModSecurity: Open Source Web Application Firewall
- JPCERT コーディネーションセンター 制御システムセキュリティ
- サイバーセキュリティ経営ガイドライン解説書：IPA 独立行政法人 情報処理推進機構
- OWASP Dependency Check - OWASP
心地よい大学生活を送るために
心地よい大学生活を送るためには，「継続」と「+α」が必要だと思います．
僕は大学に入るときに，「情報科学についての知識を深めて，面白いものを作るぞ！」という決意をしました．
以前にも書きましたが，その熱意が強すぎて思わぬ方向を向いてしまい，大学に入ると空回りしてしまいました．
心地よい大学生活を送るためには，程よい熱意を常に持ち続けることが重要だと思います． 強すぎる熱意は自分が疲れていずれ倒れてしまいます．
では，程よい熱意を持ち続けるためにはどうすればいいかというと，「継続」と「+α」です．
まず，何か大きな目標を立てます．例えば，「セキュリティのプロになる」「アプリ開発をして儲ける」 といった具合です．
次に，その目標に向けてまず自分は何ができるのかを考えます．先程の大きな目標を分割するイメージです． 可能な限り小さくしてください．先程の例ですと，「『~~~』という本を読む」や「開発環境を整える」といった具合です．
課題を小さくすることによっておのずと何をすれば良いのかが見えてくるはずです． そして，その小さな課題を「継続」して解決していくことで自分のスキルを向上させることができます．
「継続」をしていると，それが退屈に感じることがあるでしょう．
ここで「+α」が役立ちます．
僕の場合，この「+α」を「勉強会に参加する」としています． https://connpass.com/ などを探してみるといろいろな勉強会などが開催されています．
勉強会には様々な人が来ていていろいろな人から話を聞くことができます．
この話の中に，「自分が知らなかったけど面白そう」と思うものがあるかもしれません．
実際，僕は勉強会で「スクレイピング」という技術を知り，最近楽しんで勉強しています．
勉強会に参加せずとも，「+α」として，「普段あまり話さない先輩に質問する」や「一緒に開発しないかと誘う」などでも問題ありません． 普段と違うことをすると良いです．
退屈な日常に少し変化をもたらしてくれるのが「+α」です．
もし皆さんが大学生活に不安や退屈さを感じているのであれば，「継続」と「+α」をキーワードとして覚えて頂き何かを始めて欲しいです．
それでは，心地よい大学生活を.
iPhoneアプリを自分のアカウントへ引き継いだお話
概要
以前親のアカウントで出していたiPhoneアプリを自分のアカウントへ引き継いだお話を書きます．
経緯
iPhone アプリを高校生のときに作成しました．そのアプリをApp Storeに公開するためには，Apple Developer Program に登録する必要があります．
このDeveloper Programは，成人した人でないと登録することができません．*1
未成年がiPhoneアプリを提出することはできないため，親のアカウントから提出する方法があります．*2
2年前の私は，親のアカウントからアプリを提出することを選びました．
2年を経て現在，私は20歳になったので自分のアカウントを Developer Program に登録しました．
そこで，「どうやって引き継ぐん？」と思い試行錯誤しました．
自分のアカウントで出す．
同じ Xcode Project を自分のアカウントから提出する（失敗）
新しいアプリを提出するのと同じ要領で，iTunes Store へ申請します．
すると，お叱りの文が帰ってきます．
We noticed that your app provides the same feature set as other apps submitted to the App Store; it simply varies in content or language, which is considered a form of spam.
The next submission of this app may require a longer review time.
似てるアプリが出てるってそれワシのアプリや... (´・ω・｀)
とまぁ，自分が作ったアプリでも違うアカウントから提出することはNGみたいです．
アプリの譲渡を利用する（成功）
レビュアーさんに「これ僕が2年前作ったアプリでオカンのアカウントから出してるねん(英語)」と送ると，「ここレビューの場所やからサポートに連絡して(英語)」と返ってきました．
僕は翌日，iTunes Connect Support へ連絡をしました．
iTunes Connect Supportさんへ
僕の作ったアプリをオカンのアカウントから自分のアカウントへ移行したいねんけどどうしたらいい？ アプリの譲渡もできないんやけど... ちなみに僕のアカウントは ＊＊＊@＊＊＊.＊＊＊ やで (英語)
すると，3日後(土日を挟んだ)Appleのサポートから日本語で返信が返ってきました．
AAA様
この度は App Store Developer Support へお問い合わせいただき、誠にありがとうございます。
AAA様が成人されたのでアカウントの名前をご自身の名前に変更したいとのご要望ですが、一度作成されたアカウント名を別人に変更する事は出来ません。しかし、AAA様の Apple ID: ＊＊＊@＊＊＊.＊＊＊ を確認したところ、すでにAAA様のお名前のアカウントが存在しております。
もし Apple ID: ----@---.--- のアカウントにて公開しているアプリケーションを Apple ID: ＊＊＊@＊＊＊.＊＊＊ のアカウントへ移行されたい場合は、下記のガイドに沿ってアプリケーションの譲渡を行ってください。条件を満たしている場合は譲渡が可能でございます。
https://help.apple.com/itunes-connect/developer/?lang=ja#/deved688524f
また、Apple ID: ----@---.--- のアカウントの有効期限が切れていたため、アプリケーションの譲渡を可能にするため特別に本日より一週間アカウントを有効にさせていただきました。この一週間以内にアプリケーションの譲渡を行っていただけますよう、お願い致します。
ご不明な点、質問等ございましたらお気軽にお問い合わせください。
サンキュー Apple
"特別" にアプリの譲渡を認めてもらえたけど，本来は親のアカウントが有効な期間に自分への譲渡を行わないといけないのかもしれない．
アカウントが有効であれば，譲渡が可能みたい．
もし，親のアカウントで出そうかなと考えている人がいれば気をつけて．
（あまりいないと思うけど）
