読者です 読者をやめる 読者になる 読者になる

IT omoe

ITのこと知らないんですけどIT関連のことを気ままに綴ります

エンジニアのカレシはよいぞ

この記事はカノジョできてるエンジニア Advent Calendar 2016の5日目の記事です.

qiita.com

はじめに

このアドカレも最初はスカスカでしたが,随分と埋まってきました.
せっかくだから全部埋めてやろうってことで埋まってない日を埋めるために無理やり記事を書きます.

※この記事はネタ記事です.若干惚気っぽい何かも含まれていますのでそういうものに耐性のない方は気をつけて下さい.

何を隠そう,私のカレシはこのアドカレを作った張本人であり,1日目に割りとハードルの高いネタ記事を書いた人です.

www.yukisako.xyz

そういやこの記事の中でこんなことを言ってましたね.

こっちも誕生日には動画を作ったりしましたが,鬼恥ずかしいので載せません.

カノジョできてるエンジニアAdvent Calendar 1日目 - ロボット・IT雑食日記

気になる人のため(そんな人は居るのか?)にこのことについてちょっとだけ紹介しますね.

エンジニアのカレシが誕生日に素敵なサイトを作ってくれた話

誕プレもらって嬉しがってる私に追い打ちをかけるように,ある1つのリンクだけが置いてあるノーパソのデスクトップが突き出されたんですね.で,そのリンクをポチッとしてみると

f:id:ottosan84:20161205232138p:plain:w600

こういうサイトが出てきまして.一見普通のサイトに見えますよね.

yukisako.github.io

こちらが普段のサイト.そう,なにやら不審なリンクが出現していますよね.それをポチッとすると...

f:id:ottosan84:20161205232656p:plain:w600

でんっ.こんなサイトがっ.画像ではわかりませんが風船がふわふわ動いてて,その下の星座みたいなのも動いてるんですよ.で,カーソルを近づけるとカーソルを避けるっていう.地味にこってます.で,ちょっと切れてますけどこの下に動画が貼り付けてあるんですね.その動画もめっちゃ良くて載せちゃいたいくらいなんですけど,多分製作者が恥ずかしすぎて死んでしまうと思うのでやめときます.ってことでこのサイトのリンクも載せられないんです.ごめんなさい.

エンジニアのカレシはよいぞ

実際これを作ってもらって身としてはめっちゃ嬉しかったですし,感動しました!!!
てことで,そこのカノジョいないエンジニアさん!こんなサイトをちょちょいとつくるだけでその辺の女の子を喜ばすことができます!これはとても大きな武器です!!頑張ってください!笑

そして,この記事を読んでいるカレシいないあなた!エンジニアのカレシという選択肢も考えてみて下さいね!その辺にいる冴えない感じのエンジニアさんでも,もしかしたらこのような形であなたを幸せにしてくれる可能性を秘めているかもしれません!!

ということで,よいクリスマスを!($・・)/~~~

1dayインターンに参加しました!

本日、立命館大学BKCで行われた株式会社みんなのウェディングさんの1dayインターンに参加させていただきました!その感想とかいろいろを簡単にまとめておきたいと思います。インターンってよく聞くけど、実際どんな感じなの?と思っている人はこの記事を読んで少しでもインターンのことを知ってもらえたらと思います。

www.mwed.jp

 きっかけ

私はインターンというものに参加するのはこれが初めてでした。別にインターンに関してアンテナを張ってた訳ではないのにどうしてこのインターンを知ったのかというと、前回の記事で書いたあいちゃれにみんなのウェディングの方が来ておられていて、その方から連絡があって知り、特に用事もなかったので参加させていただくことになりました。

 

ottosan84.hatenablog.com

 

内容

内容としては

をについて学びました。他にも良いコードの書き方や実際のサービス開発環境で行われている実践的な手法についてのレクチャーをいただきました。それとは別に簡単なお疲れ様会で軽食をいただきながら社員さんや一緒にインターンに参加した方とお話をしました。

 

実際にインターンに参加した感想

先述したように、インターンに参加したのは初めてだったので少し緊張気味で会場に向かったのですが、実際行ってみると机にお菓子が!(そこじゃない)

f:id:ottosan84:20161204163258j:image

インターンが始まると和やかな雰囲気で楽しかったです。ハンズオンではCTOの方が丁寧に教えてくださりました。Rubyは元々少し触ったことがあったので最初の方は簡単でしたが、ユニットテスト機械学習のところでは新しい知識を得ることができました。また、実践的な手法を学ぶことで実際の開発環境について少しだけイメージをつかむことができました。

 

お疲れ様会ではジュースとピザが用意されていて、それらを頂きながら1時間ほど談笑しました。

f:id:ottosan84:20161204174254j:plain

2回生は私だけで私以外はみんな3,4回生や院生だったのですが、とても楽しく色んなお話させていただくことができました。先輩や社員さんのお話は進路を考える上でとても参考になりました。

 

さいごに

インターンといえばもっと堅苦しいイメージがあったのですが、今回はとても和やかな雰囲気で楽しむことができました。(企業さんやインターンの種類によってまた色々あると思いますが)

新しい技術を身につけるだけでなく、先輩や企業さんの生の声を聞けるというのがインターンのいいところだと思います。インターンに行ったとこがないという人は是非一度参加してみて下さい。私もこれを機に積極的に色々なインターンに参加していけたらなと思います!

 

「あいちゃれ」で受賞しました!

今回,立命館大学主催のソフトウェアコンテスト「あいちゃれ」こと,ICT Challenge+Rに迫くんと共にファイナリストとして参加させていただきました.

f:id:ottosan84:20161128105329j:plain:w500

発表したもの

発表したのは「Safitem」という物資支援サービスです.簡単に言うと,避難所と支援者を結ぶWebアプリケーションです.詳しくは以下の紹介動画をご覧ください.


あいちゃれ2016 Safitem紹介ビデオ

あいちゃれ当日

当日は7組の高校生と6組の大学生がステージ発表を行い,5組の高校生と9組の大学生がブース発表を行いました.素晴らしい発表やアイディアをたくさん聞くことができ,とても良い刺激になりました!特に,高校生版であいちゃれ史上初の中学生が発表していたのが印象的でした.ステージ発表のグループも任意でブース発表ができるのですが,今年は全員ブース発表を行っていました.

f:id:ottosan84:20161128105235j:plain:w300

また,あいちゃれは多くの企業から協賛を得ており,その企業の方々と交流することができます.

f:id:ottosan84:20161128105745p:plain:w600
f:id:ottosan84:20161128105803p:plain:w600

最終結果

結果として「テーマ賞」「ワークスアプリケーションズ賞」「メンバーズ賞」3つの賞をいただくことができました!

テーマ賞

受賞理由を聞いていないのでわかりませんが,恐らく今回のあいちゃれのテーマが「安全・安心,社会の役に立つツール」であり,Safitemのコンセプトがそれによく合致していたということで賞をいただけたのではないかと思います.

ワークスアプリケーションズ

株式会社ワークスアプリケーションズさんからの賞です.最近のワークスアプリケーションズさんの製品のコンセプトの1つとして「クラウドネイティヴ」というものがあり,それにピッタリだということ,また当日来ておられた社員さんが学生時代に災害に関する研究を行っておられたことから賞をいただきました.また,

・理想を考え抜いている企画であること

・ 人々の抱える作業を圧倒的に効率化/自動化できる機能が搭載されていること

あいちゃれー協賛企業賞より

という期待にも沿えられたのではないかと思います.副賞としてAmazon Fire HD 10 タブレットAmazonギフトカードをいただきました.
f:id:ottosan84:20161128112306j:plain:w500

メンバーズ賞

f:id:ottosan84:20161128112818j:plain:w500
株式会社メンバーズさんからの賞です.メンバーズさんの理念である「社会貢献」のイメージにあっていることや,同じくRubyを使っているということで賞をいただきました.また,

実際に利用するユーザーをきちんと想定できており、この機能、便利!欲しかった!と思わせることが出来ているもの

あいちゃれー協賛企業賞より

という期待にも沿えられたのではないかと思います.副賞にはぐるなび食事券をいただきました.

f:id:ottosan84:20161128112342j:plain:w500

最後に

最後になりましたが,当日見に来てくださった方や応援してくださった方,受賞を祝ってくださった方,ありがとうございました!
f:id:ottosan84:20161128114724j:plain:w300

今回の経験を活かしてこれからも精進していけたらなと思います.

そして,当日発表を見ていただいた企業の方々,また何かあれば気軽にご連絡いただけたらと思います.今後もよろしくお願いいたします!

【Webアプリ】簡単な記事投稿アプリを作った

こんにちは. Sinatraを用いた簡単な記事投稿アプリを作ったので紹介したいと思います.

f:id:ottosan84:20161126180645p:plain
気軽に楽しむ茶道教室

きっかけ

母が地元のカルチャーセンターで茶道を教えることになりました.そこで,その教室の生徒さんだけが見れるブログのようなものがないかと聞かれ,考えたところ,アカウントを持っていなくても誰でも簡単にそういった記事を見れるというサービスがぱっと思いつかなかった(はてなのなぞなぞとか知らなかった)のと,自分で作ったものを一度公開して誰かに使ってもらいたいという思いから,作ることになりました.

機能紹介

先程も述べたように,このアプリケーションではパスワードを知っている人だけが記事を見ることができるというものです.また,管理者は記事の投稿や管理ができます.以下で詳しく見ていきます.

ユーザ(生徒さん)ができること

ログイン

f:id:ottosan84:20161126182749p:plain:w600
トップページのログインボタンを押すと,このようにモーダルが出現するのでそこにパスワードを入力し,ログインします.アカウントの作成などなく,パスワードを入力するだけなのでとても簡単です.
ログインすると,このように記事一覧が出ます.
f:id:ottosan84:20161126182920p:plain:w600

記事閲覧

f:id:ottosan84:20161126183116p:plain:w600
記事を選択すると
f:id:ottosan84:20161126183225p:plain:w600
このように記事の内容が表示されます.
上のナビで前の記事や次の記事に移動でき,記事一覧にも戻れます.このナビは上に固定されているので,いつでも記事から離れることができます.

管理者(先生)ができること

ログイン

ユーザと同じようにログインができます.ユーザとパスワードは違うものになります.
ログインするとこのような画面が出ます. f:id:ottosan84:20161126190814p:plain:w600

記事の管理

新規記事作成

上部のナビから「新規記事」をクリックするとこのような画面になり,記事を投稿することができます.
f:id:ottosan84:20161126192031p:plain:w400
普通に書いてもいいですし,HTMLで書くとそのまま記事に反映されます.見出しタグや改行,太字,リスト,aタグくらいは母親に教えておこうと思います.「ファイルを選択」で写真を投稿できます.

記事の編集

編集ボタンを押すとこのような画面になり,記事の編集ができます.
f:id:ottosan84:20161127213417p:plain:w400

記事の削除

削除ボタンを押すと記事を削除できます.

パスワードの管理

上部のナビの「管理」からユーザと管理者のパスワードの変更ができます.

その他

一応スマホからも見れます.
f:id:ottosan84:20161127214234p:plain:w200

今後の改善点

以上のような機能がありますが,これらは本当に最低限の機能だけなので時間がある時により良くなるよう改善していきたいです.今のところ考えている改善点は以下のような感じです.

  • 削除機能の改善
    • 削除ボタンを押すとそのまま消えてしまうので,一度確認する画面を出すようにしたい.
  • 画像投稿機能の拡張
    • 現在,各記事につき写真が1枚しか投稿できない仕様なので,複数枚投稿できるようにしたい.
  • 記事のプレビュー機能の追加
    • 記事を書いたらそのまま投稿という形なので,プレビューが見れるようにしたい.
  • パスワード管理機能の改善
    • 現在はパスワードを変える時に1度だけ入力したらそのまま変更されるという感じで,しかも何を打ったのか分からない入力画面になっているのでタイプミスをしたら悲しいことになります.なので,よくある2度入力させるやつとかボタン押したらパスワードが見えるようになる機能とかつけれたらなと思います.
  • フォントの追加
    • 現在は游ゴシック体しかなくて,スマホから見ると字が見えづらい状態になっているのでスマホに対応していてかつ見やすいフォントを追加したい.
  • デザインの改善
    • トップページの見出しがウィンドウ幅によっては変なところで改行しちゃうのでそれを直したい.

ざっとこんな感じでしょうか.今後このアプリが使われていってユーザの意見,要望などがあればそれもどんどん取り入れていけたらなと思います.

大学の課題を自分のPC環境でやる際に立ちはだかってきた3つの障害

こんにちは.PCの環境って何かとめんどくさいですよね.今回は学校(Linux)の課題を自分のPC(Mac)でやろうとしたときに起こった困ったことを備忘録も兼ねて書いておきたいと思います.
3つの障害とは,以下のようなものです.

  1. 学校で実行できるプログラムが自分のPCで実行できない
  2. displayコマンドが使えない
  3. OSアップデートしたらライブラリーが消えた

ここから順にその原因と対処法を紹介していきたいと思います.

学校で実行できるプログラムが自分のPCで実行できない

経緯

課題にはサンプルコードがあり,それを改変して課題を進めていくという形式でした.で,学校でもらってきたプログラムを自分のPCで実行してみるとエラーが出るんです.しかも改変していない部分で.エラーを見てみると,

「関数内関数なんて使えないよ」

っていう内容でした.学校ではコンパイル通るのに,自分のPCで通らないって...もしかして私のコンパイラ古い?
ってことでgcc -vgccのバージョンを確認.すると,学校のは4.4.7なのに自分のは4.2.1でした.Xcodeを入れたときにデフォで入るバージョンがこれみたいです.調べてみると,4.3くらいで関数内関数が使えるようになったみたいで,予想は当たってたみたい!てことでgccのバージョンをあげることに.

gccのバージョンをあげよう

  1. なんか普通にアップデートしようとしたらエラー出たのでbrewをアップデート
    brew update
  2. tap コマンドで homebrew/versions を追加
    brew tap homebrew/versions
  3. gccのバージョンを検索
    brew search gcc
  4. 入れたいバージョンをインストール(今回は4.9).これは結構時間かかる.
    brew install gcc49
  5. gccのリンクを設定
    sudo ln -s /usr/local/bin/gcc-4.9 /usr/local/bin/gcc
    sudo ln -s /usr/local/bin/g++-4.9 /usr/local/bin/g++

これでできたはず!wgcc -vで確認してみませう.そして,バージョンをあげたらコンパイル通りました.めでたし.
この辺のサイトを参考にしました.

displayコマンドが使えない

経緯

画像処理の課題だったので,できた画像を見たい!って思ったときにdisplayコマンドが使えないってなって悲しい感じになりました.なんかこんなエラーが出るんです.

display: delegate library support not built-in `' (X11) @ error/display.c/DisplayImageCommand/1893.

しかも,よりによってPGMとかPPMとかよくわからないファイル形式なので表示できるアプリケーションが他にないんですね.とりあえずImageMagickは入っているので,新しいアプリを入れるよりImageMagickがちゃんと動くようにした方がいいかな〜と思ってdisplayコマンドがちゃんと機能するように頑張ることにしました.後,コマンドラインから操作できるっていうのがいいですよね.

ImageMagickが動くようにしよう

  1. とりあえずImageMagickをアンインストールしときます.
    brew uninstall imagemagick
  2. Xquartzを入れます.
    brew cask install xquartz
  3. Xquartzを起動して
    export DISPLAY=':0.0'
    brew install imagemagick --with-x11

以上でいけるはずです.display (画像名) & で確認してみましょう.この辺を参考にしました.

OSアップデートしたらライブラリーが消えた

経緯

これは学校のパソコンが云々と言うより,OSをアップデートしてしまったのが悪いのですが,それまでちゃんとコンパイルできていたプログラムがいきなりエラーをはいたんです.何かと思えばstdio.hがないっていうんです.

fatal error: stdio.h: no such file or directory  

確かに,どこを探してもないんです.stdioだけでなく,stdlibなどの基本的なライブラリが消えてしまっていました.

stdio.hを入れよう

  1. 最新のXcodeを入れる
    これは関係あったのかなかったのかわかりませんがとりあえず最新のXcodeをアプリストアから入れました.
  2. Command Line Toolを入れる
    Xcodeを起動し,新規プロジェクトで「Mac OSプログラム>Command Line Tool」
    言語タイプ→「C」
    C言語のテンプレートを使ったプロジェクトが開く→そのままビルド
    「実行するにはCommand Line Toolをインストールする必要があります.インストールしますか?」→「OK」

無事コンパイルできるようになりました.これを参考にしました.

さいごに

そんなこんなで,環境関係のことで色々ごちゃごちゃしてたせいで課題がなかなか進みませんでした.そもそも,なぜこのようなことが起こったのかというと.

  1. gccが古かった
  2. ImageMagickが入っているだけで使える状態ではなかった
  3. むやみにOSをアップデートした

みたいな原因があったわけで,これらの問題は別に学校の環境が云々とかいう前に普段から自分のPCの環境をきちんと管理しておけば済む話だったのではと思いました.具体的には

  1. コンパイラはある程度新しいのにしとこうね
  2. ソフトウェアを入れたときはちゃんと使えるように設定しとこうね
  3. むやみにOSアップデートしないようにね

って感じでしょうか.まあなかなか難しいですけれどもね.

Bootstrapを乱用したホームページを作ってみた

自分のホームページのデザインがイマイチだったので,何か簡単にいい感じのデザインにしたいと思ってBootstrapを使ってみることにしました.
今回はその際に参考になった色々をメモっときたいと思います.

Bootstrapとは

そもそもBootstrapとはWikipediaさんによると

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワーク

だそうです.
まあ簡単に言うと,決められたclassを指定するだけで,サイトに自動的にデザインが適応される素晴らしいアイテムなんです.ちなみに,Twitterの会社が作っているというのは有名な話.

導入

Bootstrapの公式サイトから「Download Bootstrap」をポチポチすると,zipファイルがダウンロードされます.それを自分の開発したいところで解凍してやります.
f:id:ottosan84:20161005115334p:plain:w400
こんな感じ.後はこれらを適応したいHTMLなどにリンク付けてやるだけです.

参考になったサイト

個人的に参考になったサイトをあげておきます.

  • ドットインストール
    だいたいの必要な知識を得ることができます.
  • Bootstrapの使い方
    全ての内容を網羅しているわけではないですが,Bootstrapを使っていて,「このclass,何て書くんだったっけ〜?」ってなったときに素早く自分の知りたい内容を調べることができました.情報がよくまとまっていて,デモもたくさんあるのでわかりやすいです.
  • Bootstrapの公式サイト
    英語ですが,意外とテンプレや例が豊富なので使ってみるといいかもしれません.

できたもの

これです
f:id:ottosan84:20161005164417p:plain:w600
利用したBootstrapの機能は,

  • ヘッダー
  • スライド
  • パネル
  • テーブル
  • グリッドシステム

など.正直なところスライドとかそんなに必要性ないんですけど面白くて入れてしまいました.
スマホで見るとこんな感じ.
f:id:ottosan84:20161005165450j:plain:w200
簡単にレスポンシブデザインができちゃうんです.
今までBootstrapをいうものの存在は知っていたのですが,あまり詳しく知りませんでした.今回の件で「めっちゃ便利やん!!」となったのでしばらくBootstrap信者になってそうです.

LINEスタンプ作った

お久しぶりです.LINEスタンプを作ったので,その制作過程などについて簡単に綴りたいと思います.

LINEスタンプ作りました

f:id:ottosan84:20160928162727p:plain 無気力にゃんこ

私が普段ツイッターのアイコンにしたりこのブログにも使っているネコちゃんのスタンプです.

f:id:ottosan84:20160928162637j:plain
こいつですね.

制作過程のお話

私はキャラクターデザインを担当しました.データ化はさこくんがしてくれました.
ペンタブとか持ってないので普通に紙に書いたのを写真を撮って,それをillustratorでトレースして,色をつけてもらいました.

f:id:ottosan84:20160928164057j:plain
これが
f:id:ottosan84:20160928164154p:plain
こうなって
f:id:ottosan84:20160928164415j:plain
こうじゃ.

思ったよりも簡単にできちゃうんです.

申請過程

LINEの審査は結構時間がかかります.今回は最初の申請からリリースまで2週間近くかかりました.でも以前は何ヶ月もかかったそうなのでこれでも早い方みたいです.
審査基準は色々と厳しくて,未成年者の飲酒喫煙を想起するものがだめだとか,性的表現がだめだとかいうのがガイドラインに載っています.
そして今回,唯一リジェクトされたのがこれ(再現). f:id:ottosan84:20160928171228p:plain
エナジードリンクを飲んで倒れているのを表現したかったのですが,どうもこのモンエナらしき何かがだめだったようです.怪しいとは言われていたのですがやはりダメでした.
そして最終的にこうなりました. f:id:ottosan84:20160928172041p:plain
もうエナジードリンクなのかよくわからなくなってしまいましたが,まあ妥協です.

さいごに

結構作るのは楽しかったので,第2弾も作りたいな〜とか思ってます.よかったら買って下さい!!