最近は，多くのOSSがあります．それらのコードを読んでみると，自分たちが知らないところ（知らなかったところ）でどのような処理をしているのかを理解することができます．その裏側を知っていることによって，自分の書くコードをいい感じにすることができます．また，多くのすごい人たちが作りあげているので，単純に勉強にもなります．

勉強し続ける

前提として，コードを書くことだけが勉強ではありません．本を読んだり，映画を見たり(SFとか？)，発表したり，他人のコードを読むことも勉強です．プログラムなどの技術には，移り変わりがあります．なので，「【任意の言語】を勉強しておけば大丈夫」や，「【任意のシステム】だけで生きていく」などはリスクがあります．その時代に合わせて，自分を変化させていく必要があります．勉強を続けることで，変化にも対応することができます．

勉強するモチベーション維持の方法

いろいろなことに興味を持つ
- 興味のある分野を増やすことによって，「疲れてきたから別の興味があるものを勉強しよう」という技が使えるようになります．
勉強会に参加する
- 勉強会へ参加することによって，情報交換ができます．また，同じ分野の仲間とも出会うことができます．
根性

いろんな人の意見を聞く

これは，デザイナーさんから聞いた話です．自分が良さそうと思ってデザインしたものでも，他の人がもっといいデザインのものを思いつく可能性があります．

いろんなことをする

新しい分野を勉強するとき，０から始めることはとても苦労します．少しでも，勉強した経験があれば，新しく勉強を始めることが簡単になります．

学生の間は，自由に勉強することができます．「業務で使うから，絶対に～をしなければならない」という強制などはありません．自分の好きなときに，自分の好きなことができます．できる間にいろんな好きなことをしておきましょう．

今回のインターンでは，実際のエンジニアに近い経験ができました．このようなインターンを用意してくださった Yahoo! JAPAN の皆様ありがとうございます．

インターンへ参加することによって，実際の社会ではどのような手法で開発されているのか．何を考えてサービスが作られているのかを知ることができました．

ぜひ皆さんもインターンへ参加してみてください．

2018-01-29

傲慢な大学生がインターンシップへ行くことになった話（2回目）

インターン

某社に2週間インターンへ行くことになりました．

今回の企業は，大企業です．たぶん，誰もが1度名前を聞いたことがある企業です．

インターンへ参加し，技術やエンジニアとしてどうあるべきかを学んできたいです．また，ベンチャー企業との違いを知り今後のエンジニアライフに役立てたいです．

これだけでは少し物足りないので，選考のときのことを書きます．

私の申し込んだインターンの申し込み期限は，12月中旬でした．春休みに実施されるインターンの選考は，主にこの時期にあると考えても良さそうです．12月末のところもいくつかありました．

申し込み用紙には，以下の質問がありました．

言語やOSの経験，期間
研究内容の詳細，自信のある開発経験
手がけたプログラムで自信のあるもの

~~自信のある開発経験と自信のあるプログラムって似てる気がする...~~

私の回答はこんな感じです．

言語やOSの経験

JavaScript 3年
プロジェクションマッピングにおいて，Node.jsでWebSocketサーバ構築．
Node.jsを用いてArduinoの制御
ブラウザ拡張機能の制作

Swift 3年
プロジェクションマッピングにおいてSpriteKitを用いたインタラクティブ映像の作成．
生放送サービスにアスキーアートを投稿するiPhoneアプリケーションの作成

Python 2年
（アルバイト関係）

C言語 2年
基本的な動作の理解，

Java 1年
基本構文やJava アプレットで簡単なアプリケーションの作成.
初歩的な内容を高校で教える．

~~期間だけ見れば詐欺ですね．~~

私の場合，日替わりで言語を勉強したり，行き詰ったらしばらく別の開発をするというスタイルなので期間は長くなっています．（別の開発している期間全く考えてないわけではないので，大目に見て 🙏）

CentOS 7
個人制作物紹介ウェブサイトの作成．

それぞれに対して具体的に何をやったのかを書くと選ぶ側もわかりやすいと思います．また，そのソースコードをGitHub などに上げておくとより効果的だと思います．

研究内容の詳細，自信のある開発経験

この質問は主に大学院生など研究室に配属されている人に向けられている質問ですね．私は，2年生なのでまだ配属されていません．なので，自信のある開発経験を書きました．

私は，Webの技術に興味を持っています．なので，自分のウェブサイト( https://polyomino.jp

)を作ったときの話を書きました．まずこの技術に興味を持ったきっかけを書いた後，自分がどのようにして学んできたかを書きました．最後に今していることを書くと字数制限ちょうどぐらいでした．

順を追って書いていくと，かなり書きやすかったです．（おそらく，読む人も読みやすい）

余談ですが，ずっと前に読んで良いと思った本です．
数学文章作法基礎編 (ちくま学芸文庫)
作者: 結城浩
出版社/メーカー: 筑摩書房
発売日: 2013/04/11
メディア: 文庫
この商品を含むブログ (32件) を見る

自信のある開発経験

上の質問とほぼ同じでしたが，同じことを書いてしまうと読む人もつまらないだろうと考え，別の開発経験について書きました．

「プロジェクションマッピング」を実施したときの話を書きました．（WebVRを利用したアプリケーション開発なので，広い目で見ると "Web" ですけどね．）

利用した技術と苦労したところ，もし今後するとしたとき改善できるところなどを書きました．

あと，GitHubや個人制作物のリンク，ブログがあれば載せる場所があったので，そのフォームを埋めて提出しました．

締め切りから数日後，書類選考通過の連絡がきました．テストの受験依頼と履歴書の提出，web面接の日程調整でした．

私はこの連絡が来た日に面接日の予約とテスト受験をしました．忘れるといけないので．

「テスト」とあったので，AtCoderのようなものを想定していましたが，実際は違いました．

いわゆる SPI (?) と呼ばれるもので，迫りくる時間がかなりのプレッシャーになりました．もし，インターンへ参加するときテストがあれば，このような形式のテストも存在するということを覚えておくといいかもしれません．

https://www.benesse-i-career.co.jp/univ/assessment/pdf/gps_academic.pdf

さて面接ですが，特に問題なく終えることができました．エントリーシートを書く時点で，自分のしてきたことや興味があること，やりたいことなどをまとめているので，詳細を付け加えながら話すだけでした．この直前に準備などはマイクのテストぐらいでほとんどしていません．強いて言うなら，一つだけ質問を用意しておきました．これは，もしお祈りされたとしても，「現場の人から聞くことができた」と自分を落ち着かせるためです．いわば自己満足ですね．

こうして数日後参加許可のメールが届き，2月5日からインターンへ参加することになりました．

精進します．

2018-01-27

インターンシップへ行って学んだこと

インターン

PCを掃除していたら，インターン期間中のメモが出てきたのでここへ記録します．

私は，2017年の 8月17日から 9月6日までモイ株式会社へインターンしてきました．

モイ株式会社は，ツイキャスを中心としたサービスを展開している会社です．最近，LIVE配信サービスが乱立していますが，ツイキャスは2010年からサービスを提供してるいわば古参です．これだけ長く続いているものはとても珍しいと思います．UstreamはIBMに買収されちゃいましたからね．

会社情報 | モイ株式会社

インターンの概要

僕が参加したときのものなので，あくまで参考程度に読んで下さい．

まず，自己紹介をします．みなさん好きな言語などを紹介していてエンジニアだなぁと思いました．（僕はJavaScriptが好きと答えました．）
その後，ハッカソンがありました．「1日でツイキャスのAPIを利用した何かを作る」が課題で，僕はiOSアプリケーションを作成しました．

ここでの発表と制作物から判断され，チームが組まれました．

このまま3週間程度チーム開発です．（途中にツイキャスのサポートや歴史についてのお話もありました．）

最終日に成果発表して終了です．

インターンで学んだこと

他人が読んで分かるコードにしよう

自分しか見ないコードを書く時，ついつい面倒になって短い変数名や雑な処理方法を書いてしまいがちです．そのようなコードは，3ヶ月後自分が読んでも理解できなくなっています．コードを書く時は，常に読みやすいコード（他人が読んで分かるコード）を書きましょう．

この話を聞いたとき，「 O'Reilly Japan - リーダブルコードで読んだことと同じだ！」と思いました．
他人が読んでわからないコードは，いずれ自分も読めなくなってしまうということを実感しました．

言語，ライブラリの選定

例えば，自分が一つの言語/ライブラリしか知らなかったとします．するとどうしても，それを用いたいという気持ちが生まれます．
他の言語を使う方が，より簡単, より早く, より分かりやすくなるかもしれません．
複数言語を知っていると，なぜその言語を使うのかと考えることができます．

ひとりのエンジニアとして

エンジニアとして正しくあるべきです．例えば，公平な選定をしましょう．
チーム開発時に個人的な理由で，言語 / ライブラリを選定し仲間に強要するのはダメです．

chadfowler.com

絵文字を用いることで表現がまろやかに

この話を聞いた時衝撃的でした．絵文字は，"ワカモノ" が使う謎のツールという認識が当時の僕にはあったからです．

チーム開発をしていく上で，コードのレビューなどのコミュニケーションは欠かせません．そこで，文章だけで連絡を取り合うとどうでしょうか？キツい言い方をされたと相手が受け取り，お互いが嫌な気持ちになってしまうかもしれません．絵文字があることによって，表現の幅が増えてまろやかに伝えることができます．👍

テストは大事

テストを書くことによって，意図した動作がされているのかの確認ができます．CIツールというものもあることを知りました．
テストを書くことはきれいなコードを書くことにもつながります．テストがしにくいコードは，煩雑なものであったりする場合が多いです．

余談として TDD というものも教えていただきました．
テスト駆動開発 - Wikipedia

タスク管理しよう

タスク管理することによって進捗を判断することができます．
期限が決まっているものの場合，進捗状況をみながら完成物の調整などをすることができます．

GitHub の使い方を知る

私は高校のころからプログラミングをしていますが，このインターンに参加するまでソースの管理はいつもフォルダ分けしていました．

普段のプログラミングは１人で行っていて，誰かに見せるコードも無かったためこのようにしていました．

GitHubというサービスの存在は知っていて，ソース管理ができるということまで理解していました．しかし，コマンドがなかなか覚えられない / 自分のコードを他人に見せる必要が無いと思い利用していませんでした．インターンに参加するまで，git add ., git commit と git push ぐらいのコマンドしか知りませんでした．

インターンでは，チームで開発を行っていました．そのため，コードの共有やレビューが発生します．GitHubの使い方 / Gitの使い方はインターン終了時には実務で使うには問題が無いレベルにまで成長することができました．

クレーマー = 怒っている人ではない

クレーマーというと一般的に怒っている人という印象を持ってしまいがちですが，全員怒っている人というわけではありません．
利用していて何か問題があるから伝えに来ています．その問題をまず把握することによって，解決の糸口を探していくことが大切だと理解しました．

ユーザーをよく見よう

ユーザーを見ることによって，そのサービスのどのあたりに価値があるのか改めて知ることができます．
その価値を捨てること無く，サービスを提供し続けることができればとても良いことです．

低レイヤーを知る

低レイヤーを知っていることで，アプリケーションの作成をするときに役立ちます．

実際に動かそう

サーバーなど，どのような設定をすると自分の思った通りに動作するのかということを知るには，動かしてみるのが一番です．仮想マシンなどを用いて実際に動かして設定してみると良いです．
実際に動かすことによってより理解が深まります．

このことは，どの分野においても言えることだと思います．私はネットワークを勉強する際，実際にサーバを借りてウェブサイトを作って理解しました．理論で何度も勉強するより，一度やってみると案外すぐに理解することができるかもしれません．

インターンへ参加することによって，実際の社会ではどのような手法で開発されているのか．何を考えてサービスが作られているのかを知ることができました．このインターンは僕の人生にとって，大きな影響を与えると思います．

ぜひ皆さんもインターンへ参加してみてください．

最後に，今ツイキャスでは誕生日キャンペーンやってるみたいです．ビーズクッション欲しい...

twitcasting.tv

2018-01-01

あけましておめでとうございます．

今年もよろしくお願いします．

2017年，私は主にWeb関連の開発をしてきました．React や Vue を試してみたり，VPSを借りてセキュアな早いサーバーの構築方法を考えたりしました．

そこで，私は悟りました．

ブラウザのことを理解せずにWebの開発をできるのか？と，

ということで，2018年はブラウザの気持ちを理解する年にします．

ウェブブラウザの気持ちを理解します．#2018年の目標
— Hagi (@iPolyomino) 2018年1月1日

2017-12-23

CTFやってみた

CTF

今日，このようなイベントがありました．

atnd.org

ここで，CTFをしてきました．

OverTheWire: Bandit

このCTFは初歩だということで，CTF初心者の僕にちょうど良いです．

前提

今回のCTFでは，UNIXコマンドを使います．なので，Linuxを使えるようにしましょう．

CTFではおなじみの，Kali Linuxというものをインストールします．

https://www.kali.org/

インストール方法は検索すれば簡単に見つかるので，省略．

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までの解き方を載せてくれています．

kutsurogenai.net

2017-12-07

プロ生ちゃん回してみた．

JavaScript

この記事は，プロ生ちゃん 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日

hand spinner

そこで，どんな方法で回転させているのか気になってソースを確認してみると，JQueryRotateというものが使われていました．

jqueryrotate.com

JQueryRotateは，かなりシンプルに書くことができるようです．例えば，50msごとに3度回転だと，

var angle = 0;
  setInterval(function(){
    angle+=3;
  $("#img").rotate(angle);
  },50);

とてもシンプルで良いですね．

同じ方法でプロ生ちゃんを回転させても良いのですが，面白くないので別の方法を探します．

生のJavaScriptで書いてみた．

html5からcanvas 要素というものが追加されています．

developer.mozilla.org

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 でプロ生ちゃんを回してみます．

コード

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 などはする必要ありません．

興味があれば，ソースコードを公開しているのでぜひこちらから試してみてください．

github.com

実際に動くもの

https://ipolyomino.github.io/pronama_spinner/

ではでは👋

2017-12-03

ウェブサイト作ったときのメモ

セキュリティ Web

サーバー関係で調べたことメモ．

ログを確認するために少し変更

デフォルトでログに残る情報が少ないので． 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

上記スライドのリンク

インターンの概要

インターンの詳細

インターンのある一日

チーム内ミーティング

社内勉強会

プロジェクト内ミーティング

1 on 1

インターンで学んだこと

他人のコードを読む

勉強し続ける

勉強するモチベーション維持の方法

いろんな人の意見を聞く

いろんなことをする

言語やOSの経験

研究内容の詳細，自信のある開発経験

自信のある開発経験

インターンの概要

インターンで学んだこと

他人が読んで分かるコードにしよう

言語，ライブラリの選定

ひとりのエンジニアとして

絵文字を用いることで表現がまろやかに

テストは大事

タスク管理しよう

GitHub の使い方を知る

クレーマー = 怒っている人ではない

ユーザーをよく見よう

低レイヤーを知る

実際に動かそう

前提

実際に解く

Level 0 → Level 1

Level 1 → Level 2

Level 2 → Level 3

Level 3 → Level 4

Level 4 → Level 5

Level 5 → Level 6

Level 6 → Level 7

Level 7 → Level 8

Level 8 → Level 9

Level 9 → Level 10

Level 10 → Level 11

Level 11 → Level 12

感想

生のJavaScriptで書いてみた．

コード

Grimoire.js で書いてみた．

コード

サーバー関係で調べたことメモ．

主にセキュリティのことについて．

sshチェックするやつ

SSL証明書の発行

ログを確認するために少し変更

サイト管理系で調べたこと

Search Consoleへの登録

モバイルフレンドリーテスト

Googleアナリティクス

PageSpeed Insights

HTML5 Security Cheatsheet

Webサイトをセキュアにするための7つ道具