リンクスタートしたかった.

某アニメで出てくるかっこいいアレをモチーフにした画像をillustratorで作ってみた.

完成作品

f:id:Polyomino:20180513180546j:plain

まず,まわりに飛んでいる謎の長方形をつくる.

ひとつひとつ作ってもいいけど,手間がかかるのでまとめつくる.

長方形ツールで適当な大きさの長方形をつくる.

f:id:Polyomino:20180513180639p:plain

f:id:Polyomino:20180513180646p:plain

そのあと,段組み設定からこの長方形を分割する.

f:id:Polyomino:20180513180915p:plain

分割する量はお好みで.

f:id:Polyomino:20180513180920p:plain

色を塗っていく f:id:Polyomino:20180513181112p:plain f:id:Polyomino:20180513181108p:plain

いろんな色の長方形を作りたいから,ランダムに色をつくる.

右上だけ色を変える

f:id:Polyomino:20180513181254p:plain

上下にブレンドでいろんな色をつくる

f:id:Polyomino:20180513181330p:plain f:id:Polyomino:20180513181334p:plain

自分でランダムに配置してもいいけど,悩むから僕は場所を入れ替えた.

f:id:Polyomino:20180513181455p:plain f:id:Polyomino:20180513181501p:plain

かっこいいアレを作っていく

f:id:Polyomino:20180513181608p:plain

遠近図形選択ツールで,さっき作った長方形を配置していく. f:id:Polyomino:20180513181628p:plain

それっぽくなってきた. f:id:Polyomino:20180513181714p:plain

背景を整える.

f:id:Polyomino:20180513181800p:plain f:id:Polyomino:20180513181804p:plain f:id:Polyomino:20180513181809p:plain

完成 f:id:Polyomino:20180513180546j:plain

インターンシップへ行って学んだこと(2回目)

2月5日から2月16日まで,Yahoo! JAPANインターンしてきました.

Yahoo! JAPAN は,グランフロントに大阪オフィスがあり,私はここへ毎日通っていました.(土日,祝日は休みです.)

インターンの概要

インターン参加人数は7人で,それぞれが別々のチームに配属される形で実施されていました.
僕は,Yahoo!天気・災害の災害チームに配属されました.そこで,iOSアプリケーション改修のお手伝いをしました.

emg.yahoo.co.jp

実際に使われているアプリのソースコードをさわるという貴重な体験ができたことは,とても良かったです.

インターンの詳細

インターンのある一日

  • 10:00 出社
  • 10:15 チーム内ミーティング
  • 10:30 開発
  • 12:00 お昼休み
  • 13:00 再び開発
  • 15:00 社内勉強会
  • 16:00 プロジェクト内ミーティング
  • 17:00 開発
  • 18:00 1 on 1
  • 18:30 終業作業
  • 18:45 退社

チーム内ミーティング

基本的にチームの全員が参加されていました.ここで,各プロジェクトの進捗共有などされていました.チームのプロジェクトが今どのような状況にあるのかを把握することができ,また 連携が必要な部分の調整などについてもここで話し合われていました.

 【補足】
「チーム」は ”防災” や "天気" のような分類で,「プロジェクト」は "アプリ",”バックエンド” などの分類です. 今回私は,防災チームのアプリプロジェクトメンバーでした.

社内勉強会

社内向けに勉強会が開かれていました.開発に携わる多くの人が来るものや,iOSの開発者が集まる勉強会など様々でした.

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

アプリ開発に携わる人でミーティングでした.アプリのUI等についてAndroidiOSの人で話し合ったり,デザイナーさんと意見を交換したりしました.

1 on 1

インターンでこの言葉を初めて聞きました. 検索すると出てきますが,「上司と部下が対話する」感じです. 普通に開発やミーティングをしていると,なかなか思っていることを言い出すことができないかもしれませんが,ここでいろいろと相談することもできます.

本が出ているようです. http://amzn.asia/8YMHblv


ミーティングや勉強会は 日によって様々で,あまり開発する時間を取れない日もありました.その一方で,丸一日開発という日もありました.

インターンで学んだこと

他人のコードを読む

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

勉強し続ける

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

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

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

いろんな人の意見を聞く

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

いろんなことをする

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

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


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

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

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

傲慢な大学生がインターンシップへ行くことになった話(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

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

順を追って書いていくと,かなり書きやすかったです.(おそらく,読む人も読みやすい)

余談ですが,ずっと前に読んで良いと思った本です.

自信のある開発経験

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

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

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



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

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

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

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

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

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

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

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

精進します.

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

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

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

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

会社情報 | モイ株式会社

インターンの概要

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

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

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

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

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

インターンで学んだこと

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

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

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

言語,ライブラリの選定

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

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

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

chadfowler.com

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

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

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

テストは大事

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

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

タスク管理しよう

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

GitHub の使い方を知る

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

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

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

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

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

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

ユーザーをよく見よう

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

低レイヤーを知る

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

実際に動かそう

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

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


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

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

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

twitcasting.tv

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

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

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

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

そこで,私は悟りました.

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

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

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

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

この記事は,プロ生ちゃん Advent Calendar 2017 7日目の記事です.


2017年もあとすこしとなってきました.

今年を振り返るといろいろなことがありました.

「5000兆円欲しい」や「けものフレンズ」,「ハンドスピナー」が話題になりました.

ハンドスピナー...!?

ということで,プロ生ちゃんをハンドスピナーの如く回転させました!!!
 (;´Д`) < 強引すぎる 

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

webでできるハンドスピナーは,うおた氏が作成されていました.

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/

ではでは👋