報告遅くなりました！開業しました！
こんにちは。
久しぶりの執筆作業で、慣れないですが早速書いていきます。
今回は、開業報告となります。
本当に遅くなってしまい申し訳ありません。
せっかく開業してから少し時間が経っているので、開業してからどんな変化があったか、なんで開業したかの経緯も一緒に執筆していきます。
基本情報
屋号:ITDharman （ITダーマン）
業務内容:インターネット関連（IT関連）
メンバー:3人
開業日:2017年2月20日
経緯（すっごい簡潔にまとめました）
現在、私は専門学生です。が、私の専門学校の雰囲気はそんなに活気に満ちてはいません。退学を決めたこともあります。
「活気や意欲がない」その理由の1つとして「授業で満足し、最新のIT技術を認知していない」という問題が考えられます。
また、専門学生の中には「勉強したくてもバイトで時間がとれない」という方もいます。そんな人たちに「将来に繋がる形で過ごしてもらい、勉強と生活の両立してもらいたい」という思いと、それによって「頑張れば報われる！」と周りに知ってもらうことで、クラスの雰囲気を変え学校を内部から変化できたらいいという考えのもと開業を決意しました。
とはいえ、顧客もなくメンバーもいない状態での決意でした。そんな私に1つの転機が訪れます。
高校の友人の店のホームページの作成を依頼されます。
Wordpressなど、簡単にホームページが作成できる時代...自分1人でも制作できると思いましたが、ちょうどそのとき一緒にセキュリティの大会に出ているメンバーがいたので声をかけました。メンバーはふたつ返事でOKしてくれました。
※ここから先のコーディングなどの内容は、
naro3.hatenablog.jp
から順に見ていただければと思います。
この時に「せっかく作るなら最高のものを！」と思い学校以外の外部のフロントエンドの教室に通い始めました。
その後、初の仕事を納品し、メンバーと屋号を決め吉日の2月20日に開業をしました。
開業してからの変化
大きな変化はなく、「人に会うことが多くなった」「デザインなどにも力を入れるようになった」くらいです。
しかし、常に「何かチャンスはないかな！？」「自分に足りないものはなんだ？」と思うようになり、ハングリー差は増したと自覚しています。
まとめ
入学当初からの「学校を変えたい」という思いと、偶然ホームページ制作の仕事が来たこと、それで飛び込んだ環境が「起業家さん」が多かったこと様々な偶然が重なって開業したように思います。
これからは、まずは現在のメンバーでの安定を目指し、並行してどんどん人を巻き込んで行けたらと考えています。
最後に
以前まで自分は「ご飯が食べれればいい、責任ある立場は嫌だ」と考えていましたが、ある方にこの本を勧められて「社長って夢があるな！」と考えが一変しましたので最後にご紹介させてもらいます。
- 作者: 藤田晋
- 出版社/メーカー: 幻冬舎
- 発売日: 2013/06/27
- メディア: 文庫
- この商品を含むブログを見る
この本は「サイバーエージェント」の「藤田社長」の起業にまつわる様々な苦悩や感動が詰まっています。
レビューが秀逸で、とても良く伝わると思いますので是非覗いていただき、興味があれば買ってもらえればなと思います。
以上！報告となります。
また、しばらく更新頻度増えると思いますのでよろしくお願いします。
※開業に伴い事業のブログとIT技術のブログの分離などを考えています。詳しい方針が決まり次第報告させていただきます。
台東区で一番チャラいエンジニアさんと対談した話
こんにちは。
私は高校2年生頃から進路決定のために人に会い始めたのですが、今回はホームページ制作の仕事の際に相談にのってもらったときのことを執筆します。
まとめるまでに何度も修正を加えました。
丁寧に思ったことを全て書くのがいいのか、そのままの対談を載せるのか、いろいろ試した結果シンプルに簡潔にまとめるのが一番しっくり来ました。
今回会って頂いた方
株式会社Manhattan Code
代表取締役
飯村 有さん
Twitterで声をかけてもらいました。
タイトルの「台東区で一番チャラいエンジニア」というのはTwitterプロフィールからいただきました。
相談した内容
ビジネスの悩み
- 責任や税金のこと。
- 今後の受託金額のこと。
- 将来的にメンバーが生活できるくらいにしたい。
自分の野望について
- 達成した時に記事にします。
返答まとめ
誠に勝手ながら、まとめさせていただきます。（聞いた内容と自分が思ったこと、経験など全部書くと論文かけそうな量になるくらい深い言葉の数々でした。）
人を指揮する上での悩み
私が心に刺さったものを3つ抜粋します。
挑戦できる環境を作る
「まずは一緒にやる。やり方を見せる。」といわれました。
ITでは壁に当たるのとブレイクスルーの繰り返しなので、最初の壁の乗り越え方は私自身も先輩から教えてもらいました。
失敗を許容する。
この言葉が一番心に刺さりました。
「失敗を許容すれば、言い訳をしなくていい。」「言い訳をしなければ人は成長する。」というものでした。
これは今までの自分の考えを変える大きな衝撃になりました。
つまらないと思ったらやめる。
「自分たちが楽しまなければ、いいものは作れない。」
これは「知ってはいても実行できない。」ものだと思います。実際、自分も話を聞いて思い出すまで忘れていました。
自身の変化
以前
自分自身ここまで「動いただけ」できたので、「動かない人」に腹が立つというより、もったいないという気持ちを強くもっていました。資格にしても「やれば受かるものなのになぜやらない？落ちたら補講やら、お金やら浪費だけだろう。」と考えてましたし、「動かない人」に対して「自覚して変わらない限り、本当の変化はありえない。本人が気づくまで仕方ない。」という半ば諦めに似た考えもありました。
対談後
自分自身が元々ゲームプランナー志望で、現在も何かと「ゲーム性のあるものを作ることが楽しい。」という経験から、本人が「ITの世界」に入った根源は必ず全てにおいての起因に関係するという考えから「意識の根源・動かない原因・要因を探る」ということを心がけました。
また、機会というのは「発信」さえしていれば自然に来るものですので、まずは「発信」をすることに慣れてもらうために「発信する機会・環境を与える」ということも意識するようになり、現在は自分のもっている人脈やコミュニティに積極的にメンバーを巻き込んでいます。
最後に全てにおいて「一緒にやる」ということも心掛けています。
私は「失敗をした。」、「間に合わなかった。」などのときにはまず原因を探るなど分析からします。
誰かが同じ状況になったときにはそれと同じことを「一緒にやる」ことにより習慣にしてもらえたらと考えています。
全てに通ずるのは「他人を変えたいなら、まず自分から変わる」ということです。
感想
今までいろんな方に会って話をしてきましたが、一番私の理想に近い方でした。考え方などは自分が今まで抱えていた多くのものを改善するような気がして話に聞き入ってました。気づけばノート3ページにびっしりメモが並んでました。また、ここまでリラックスして話をしたのも初めてかも知れなかったです。何回笑ったか覚えてません。全てにおいて親身になって具体的な改善策と考えを話をしてくださり、すぐに実行できる形でいただきました。私自身「もっとこの人に学びたい！メンバーにも触れてもらいたい！」と思い。すぐさまメンバーの1人を毎週土曜日に開催している飯村さん主催の勉強会に参加させました。
今回の対談は確実に自分のターニングポイントになると思います。
本当にありがとうございました！
ホームページ制作しています！まとめ
こんにちは。
今回は「ホームページ制作しています！」のまとめ記事となります。
初仕事であり、初のチーム作業でもありました。
メンバーの紹介や今後のお知らせなども執筆していきます。
きっかけ
高校の時の友達にたまたまITの専門学校に通っていると言った際に、依頼されました。
本当に偶然です。
依頼されたときの状況
- メンバーどうする？
- フロントエンド触ったことない！
- サーバーも借りたこともない！
- 写真やったことない！
- デザインもやったことない！
という本当にド素人。
しかも、SECCONという大会間近のためそこそこ忙しかった時期でした。
しかし、いいきっかけ、好機だと思いやってみることにしました。
やったこと
- メンバー選び。
- クライアントさんとの面談。
- 方針決定。
- ヒアリング。
- デザインの決定、仕事割り振り。
- 開発、実装。
の6ステップです。
順に詳しく書いていきます。
メンバー選び
以前参加したMBSDというセキュリティの大会のときのメンバーをそのまま採用しました。
Aさん 器用、ツールや時間管理がすごくうまい。
Bさん マスコット、絵が書ける。
Cさん ムードメーカー、意外な発想をするアイデアマン。
こんな感じです（笑）。
クライアントさんとの面談
以前から面識のある方だったので、緊張はしていませんでしたが、ここである衝撃を受けます。
それまでは今回の仕事は、平均的なつまり「「見せるホームページ」を作れればいいな」と考えてましたが、初めてクライアントさんと話に行った際に本当に楽しみにしていること、その笑顔を見た瞬間に「僕達に頼んだことを誇れるような「売れるホームページ」を作ってやる！」と意識が変わりました。
この際にイメージやお店の「弱み」「強み」「脅威（競合）」「好機」いわゆる「SWOT分析」、お金のこと、こちらのメンバー構成を話し合いました。
方針決定
このステップは調べたりしながら、じっくり考えました。
結果、初のグループ作業であることもあり、完成図を共有することは難しいのではないかと考え、メンバー全員が各々TOPページの型だけ作ってきて、クライアントさんにプレゼンするという形を取りました。
この時点で納品日まで1ヶ月ほどでした。
ヒアリング
これは私個人での活動で、私は人から話を聞くことで経験がないことの補完をしようとしました。また、人を指揮するということについても、いろんな方にアドバイスをいただきました。
冬休みに入ったこともあり、Twitterなどで接触し、週に一人などのペースで会っていただきました。
この際にお話をした方たちが後々自分にとってキーパーソンになります。
ネットでホームページやデザインをひたすらに見始めたのもこの時期からです。
また、この時点でメンバーCが資格試験の1次免除に落ちたため離脱しました。
デザインの決定
冬休みが終わり登校した際に全員のトップページを確認しました。
3人とも見事に型が違うもので楽しかったです。
自分 ナビゲーションとドロップダウンメニューでページ遷移するもの
メンバーA 同一ページ内でスムーズスクロールするもの
メンバーB 写真を全面に押し出したタイル型
クライアントさんに、実際に同じ型で他の企業が実装しているものと見せ、デザインを選んでもらいました。
今回はスマホ中心にすることもあり、メンバーAのデザインが選ばれました。
このときで納品日まで1週間でした。
思った以上にデザインに時間を取られ、焦りが生まれてました。
サーバもこの時期に借りました。
開発実装
自分は、初めの3日で枠組みを作り、中の2日でレスポンシブデザインにして、残りはデザインに悩みました。
また、メンバーBにクライアントから送られてきた画像を送り、加工の指示をだし、メンバーAにコードを送り、変更があったり、送られてきたコードを反映させるのが仕事でした。
この1週間はメンバーも遅くまで作業をしてくれ、倒れないか心配で「休んで！」と言った次の朝にブラウザごとの動作をまとめてくれていたり、本当に助かりました。
実装できたのは本当にメンバーのおかげです。
デザインは実装の1時間前まで悩みました。
感想
今回は初仕事、初チーム作業、フロントエンドはHTMLの勉強からという先の見えないプロジェクトについてきてくれ、惜しみなく時間を使って作業してくれたメンバーに感謝しかないです。
反省点としては、フレームワークを作らずに開発をしてしまったため、無駄なコーディングや、デザインに時間を取られてしまったりしたところです。
また、写真やデザインに関しては特に改善が必要だとも感じました。
が、いいものができたと思っています。
個人としては、メンバーの作業を楽にするための管理、綺麗なコーディングが今後の課題です。
本当に大変でしたが、楽しくとてもいい経験でした。
今後は細かいバグなどを直しなから管理をしていきます。
最後に
今回の仕事を通してのヒアリングの際に、協力してくれる方ができたり、次の仕事が決まったりしました。そのため税金などの関係で開業をすることになりました。今後は事業の記事は別のブログで執筆する予定ですので、進捗がありましたら連絡しますので、よろしくお願いします。
また、ITの世界に入り1年経たずに開業をした経緯も執筆予定ですのでよろしくお願いいたします。
ホームページ制作してます！（63日目）完
こんにちは！
ホームページ制作の仕事が無事終わりました。
ようやく時間が少しできましたので、忘れないうちに記事にしようと思います。
しかし、まだブラウザ依存などのバグが多少発覚して毎日修正しています。
また、前回から大幅にデザインを変えて実装しました。
まだまだ、荒削りですが、レスポンシブデザインになっています！
また、次の記事で「まとめ」として今回の仕事の全体の流れも執筆しますので是非みてください。
デザインの変更
実装1日前に大幅にデザインを変えました。
最後まで背景に悩んでいました。
本当にコードを書くよりデザインが一番悩み一番苦しい作業でした。
何個もプロトタイプを徹夜で作っては満足し、朝起きて再度見て「なんか違う」と思い作り直す毎日が続きました。
実装1時間前に急に画像を入れて軸をずらしたり最後の最後までデザインは悩みました。
最終的な意図
最終的なデザインが決まってから、1週間で実装をしました。
まず、入りやすく、自然な印象を一番に与えたく、かつ飾らないオシャレさが欲しいと考えました。
明るい印象を与えるためにナビゲーションバーには白と緑を配色し、葉のマークもいれました。
透明感を出すために背景透過もしました。
各要素には背景に透過の白を入れ、テキストを見やすくしました。
マップや、カレンダーも入れてみましたが、カレンダーは特にIOSなどで表示が安定していないので「iframe」でなくJSでやれたらなとも考えています。
感想
今回は無事に仕事は終わりましたが、やはり力不足を多く感じました。
特にデザイン、写真に関しては特に今後の改善の必要性を感じています。
また、フレームワークを作らずに作成を開始してしまったため、コードにも多くの無駄ができてしまったのも、反省点です。
写真とコードに関しては今後、随時改善と更新をしていきます。
また、メンバーには本当に感謝しています。
メンバーのサポートがなければ今回の実装はできませんでした。
本当にありがとうございました。
詳細は次の記事にて執筆します。
お詫び
以前の記事の「後ほど更新します」などを更新できていないことをお詫びします。
時間出来次第随時更新します。4月までに、全記事の不足分の更新します。
ホームページ制作しています！（35日目）
こんにちは。
最近忙しく、サーバー関連やIT関係ない企画のことで精一杯でホームページ制作についての進捗がなかったのですが、納期が近くなってきたことと、冬休みに入り、少し時間に余裕ができたので久しぶりの執筆です。
思ったことは進捗が一定でない以上は週間の記事は無理だと言うことです（本当に申し訳ないです）。
サンタさんからの「MacBook」を待ちつつ、書いていきます。
進捗
ほとんどなし。
今回やったこと
一旦デザインから離れて書き方を覚えようと思い。
最近の主流の書き方も少し勉強しました。
その上で某大手会社っぽいヘッダーを作りました。
今回は綺麗に書くことだけを考えました。
疑似要素、擬似クラスも使って動きも1個だけ入れました。
＊あくまで、私なりの書き方ですので本家とは全く違います。
本題
某会社っぽいヘッダー
JS未使用
— ナロ (@naro143) 2016年12月24日
某会社っぽい pic.twitter.com/unUwN4ZP5t
今回は主流の書き方も少し勉強したのでソース載せます。
コメントアウトで少しだけ解説。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>みかん</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="mikan.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header class="header"> <div class="inner"> <nav class="nav"> <ul class="cf"> <li><a class="icon lemon" href=""></a></li> <li><a href="">Mican</a></li> <li><a href="">mPad</a></li> <li><a href="">mPhone</a></li> <li><a href="">Watch</a></li> <li><a href="">TV</a></li> <li><a href="">Mikan</a></li> <li><a href="">ダンボール</a></li> <li><a class="icon serch" href=""></a></li> <li><a class="icon bag" href=""></a></li> </ul> </nav> </div> </header> </body> </html>
@charset "UTF-8"; * { box-sizing: border-box; /*最近主流らしい paddingとborderをcontentに含められてレイアウトが簡単になる*/ } body{ font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif; } .cf::after { /*疑似要素 要素の一部に対して作用する afterは閉じタグの直前に挿入される*/ content: ""; /*ここでfloatの浮動化を防いでいる*/ display: block; clear: both; } .header{ background-color: black; color:#fff; height: 44px; line-height:44px; /*この2行でテキストを中央揃えにしている*/ } .inner{ width: 1000px; margin: 0 auto; /*ここにinner要素によりnav要素を中央揃えにしている*/ } a { text-decoration: none; display: block; color: inherit; } a:hover{ opacity: .7; } .nav li{ float: left; width: 10%; text-align: center; } .icon::before{ font-family: FontAwesome; /*このFont-Awesomeというのがアイコンをテキストとして扱える優れもの*/ } .lemon::before{ content: "\f094"; } .serch::before{ content: "\f002"; } .bag::before{ content: "\f290"; }
SECCON2016 Online予選に参加しました
こんにちは。
SECCON2016 Online予選に参加してきました。その報告（WriteUp）となります。
状況
初CTF参加。
セキュリティ知識なし。
勉強期間・内容
ksnctfの100点以下の問題を中心に問いてました。
解けたのは4問でした。
期間は2週間ほどでしたが、学校の提出物などもあり、がっつりは勉強できなかったです。
当日
当日は用事があり、23時頃からの参加でした。
最初は、Cipher問題の「Backpacker's Capricious Cipher」に挑戦しましたが、Rubyの知識がなく、勉強と共にトレースをしていました。が、いきなり「flag.txt」を読み込んでいたり、範囲処理がうまく理解できずに諦めることになりました。
次に取り掛かったのが「cheer_msg」です。今回はpwnの嵐で、pwnの知識も全くないため勉強と共に解いてました。
まず、「fileコマンド」で「ELF」だと判明。しかし、実行できないので、調べてFreeBSD環境でのみの実行ファイルだと判明し、「TUKUBAI FreeBSD」を構築。実行し、引数に負の数を渡すと、メモリの中身？のようなものが文字化けして表示されていました。そのため、「-1〜-10000」の値を引数として渡して実行する「総当り攻撃」のようなことを「Netcat」をいれ、サーバー内で実行。特に成果はなく、唯一同じ引数を渡しても出力結果が変わるということがわかりました。
今度は「gdb」をいれ、変数を一個ずつ見ました。が「gdb」の使い方がわからず、問題なく処理が終わると変数が初期化？されて「レジスタにない」という表示がでました。「$esp」の値が変動しているところまでわかりました。また、mainの番地？「0x80なんたら」のような表示が出ることも把握したところで、タイムアップ。
結果
自分が獲得したポイントは0。
チームは約上位30%でした。
感想
バイナリやアセンブラの勉強をまったくしていなかったので辛かったです。全ての問題がちんぷんかんぷんでしたが、「これかも？」というところから意図をたどるような感覚は楽しく、また今まで触れたことのない知識にわくわくしながら参加できました。
また、24時間の大会ということもあり、みんなのテンションがおかしくなっていくのも楽しめる要因でした。
ctf楽しいです！自分としては1ヶ月に1回参加してもいいな！という感じです。
ホームページ制作してます！（18日目）
こんにちは。
週間予定の記事ですが、昨日の学内LT大会で進捗を発表する予定だっため少し遅れましたが、ホームページ作成の進捗報告です。
自分の考え
今回は前回のデザインを一新し、シンプルに、情報量を最小にすることを考えました。また、レスポンシブデザインにも挑戦しました。
基本の動き
ホームページ制作
— ナロ (@naro143) 2016年12月7日
第2案 レスポンシブデザイン
基本の動き pic.twitter.com/EazME81qru
このようにどんなサイズにしようと要素が下に回ることがないようにしました。
感想
レスポンシブデザインは初挑戦でしたが、要件のスマホ対応、情報が一気に入るのを防ぐという自分の考えにも合っていて、気に入りました。「position:absolute」が使えないので、苦戦しました。今後はテンプレートなどを読んでレスポンシブデザインの綺麗な書き方を勉強したいと思います。また、なるべくJSを使わないようにもしていきたいです。CSSアニメーションなどにも手を出すかもしれないです。
今回はここまでです。HTMLはコーディングというより積み木をしている感覚に近いです。要素の重なりなど空間把握が必要です。
では、また来週よろしくお願いいたします。
