ポートフォリオサイトを作った + α
lockdefです
作りかけだったポートフォリオを一から作り直しました。
URL
コード紹介
深夜に調べながら作ったので、コード内容を忘れないために解説していきます。
使用したもの
Bootstrap4を使用しています。
ナビゲーションバー
<nav class='navbar navbar-expand-lg navbar-dark' style="background-color: rgb(240, 98, 146)"> <a href="" class="navbar-brand"> Lockdef </a> </nav>
navbar-darkで文字を白に設定しています。
背景色はbackground-colorで直接指定していますが、classを指定することでもともと用意されている色を使うことも出来ます。
左側に表示されるブランド名（社名やサービス名など）はnavbar-brandを指定する必要があります。
内容文
一部分を使って紹介します
<h2 style="padding-top: 20px" class="mb-0">Ability</h2> <p class="mb-0">Web, AI, Deep Learning</p> <p class="mb-0">Machine Learning, Data Sciense</p>
内容文にはmb-0を指定することでmargin-bottom: 0;を適用しています。
モーダルウィンドウ
Work部分に使われている部分です。
<figure style="display: inline-block"> <input type="image" src="./killmebaby.png" width="128" height="128" class="img" alt="KillmebabyAI" data-toggle="modal" data-target="#killmebabyai"> </input> <figcaption>KillmebabyAI</figcaption> </figure>
まずユーザーがタップする部分を表示します。
モーダルウィンドウを表示するために設定している部分はdata-toggle="modal" data-target="#killmebabyai"です。
ここではクリック部分とモーダルウィンドウの関連付けを行っています。
<div class="modal fade" id="killmebabyai" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">KillMeBabyAI</h5> <button type='button' class='close' data-dismiss='modal' arai-label='Close'><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="alert alert-primary"> Custom AI app that tells you which Kill Me Baby character your image resembles. </div> <a href="https://t.co/mAGA7zipmu">GO!!<img src="./killmebabyai.png" style="border: 1px solid gray" class="img-responsive" width="100%"></a> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
次にモーダルウィンドウの中身を設定します。 一般化したものを表示すると、
<div class="modal fade" id="killmebabyai" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> タイトル </div> <div class="modal-body"> 内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
となります。 使いたい場合はコピペしてタイトルと内容の部分を自由に書き換え、さらにid部分の関連付けも変更してください。
詳しくは公式ドキュメントを参照してください。
bootstrap4のドキュメントはわかりやすくまとまってるので英語がわからなくても理解できると思います。
紹介は以上です
おわり
満足出来るデザインのポートフォリオサイトを作ることが出来たので積極的に利用していきます。
URLから取得した画像データをNumpyのArrayに変換する
lockdefです
今日は個人的に欲しかった関数を実装したので紹介します
前準備
必要なライブラリのインストールです。
pip install Pillow
目的
引数で画像のURLを受け取り、NumpyのArrayを返す関数を作る
手法の紹介
1.必要なモジュールをインポートする
import requests from io import BytesIO from PIL import Image
- URLからデータを取得するためのrequestsライブラリ
- I/O関係の処理を行うためのBytesIO関数
- 画像を扱うImage関数
これらをインポートします
2. データのリクエスト
response = requests.get(url, stream=True)
requestライブラリのget関数でデータを取得します
3. arrayに変換する
if response.status_code == 200: img_array = Image.open(BytesIO(response.content)).convert('RGB')
データの取得が成功したことをif文で確認してから変換を行います
二行目がわかりにくいので分割します
content = response.content bytes_data = BytesIO(content) img = Image.open(bytes_data) img _converted= img.convert('RGB')
一行目で取得したデータの画像データを取得します。
二行目でデータをメモリ上に（一時的な）保存をします。
三行目でNumpyのArrayに変換をします。
四行目でRGBに変換します。
以上で完了です。
使用例
取得した画像データはMatplotlib等で表示したりPillowで画像処理を行うことが出来ます。
OpenCVで画像処理をする場合
下記にあるGistの13行目を変更します。
return Image.open(BytesIO(response.content)).convert('RGB')
から
return Image.open(BytesIO(response.content)).convert('BGR')
にしてください。
OpenCVでは画像データをBGRとして読み込むのでconvertの引数を'RGB'から'BGR'に変更することでOpenCVでも正常に画像を扱えるようになります
全文
最後に関数化したものをおいておきます。
コピペで使ったり、Gistからダウンロードしてimportしたりして使ってください。
おわり
この関数はOpenCVのノートブックを作っている最中に欲しかったんですが、思いつくのが遅かったので結局ローカルに保存した画像を読み込んで使ってしまいました。
ローカル環境に縛らないプログラム、ノートブックを作りたいときに役に立つと期待しています。
画像処理をやってみた
あけましておめでとうございます。
新時代も平和な世界であらんことを。
元号が変わっても生活に変化が訪れるわけでもなく新元号についての記事はネットの世界に山ほどあるので、令和初の記事は画像処理です。
ですが、本記事では平成の技術が使われているのでまぁ良いかなと思います
GWに入って２日間ほど画像処理について学んだのでここに一部を思い出として残しておく
使ったもの
画像処理って何
そのままの意味で画像を扱う処理全般を指す
画像とは
横×縦×チャンネル数の多次元配列のこと
要素は0 ~ 255で赤と緑と青の濃さを表す数値が入っている(RGBの場合)
つまり画像は単なる数値の集まりなので、数学的に扱うことが出来る
画像処理≒データサイエンスの認識で進める
（データサイエンス≒データ分析）
実際にやってみる
いろいろとやってみた
グレースケール化
白と黒の濃淡で画像を表す手法
画像の２値化
白と黒の２色で画像を表す手法
２値化を行うには事前にグレースケール化をしておく必要がある
閾値を設定する必要がある
ヒストグラム平坦化
画像の明暗をはっきりさせる
γ変換
画像の明るさを変更する
画像の平滑化
画像をぼやけさせてノイズを除去する
平滑化フィルターで畳み込み処理をしてる
特徴量検出
特徴量と呼ばれる情報が多い部分に点を着けて可視化する
円の大きさで特徴量が大きいか小さいが分かる
画像処理楽しい
この記事を書くためにフリー素材の画像を持ってきて画像処理をしていて楽しかった これ以上のことをやる予定は無いが暇つぶし程度にやるにはいいかもしれない
需要があればソースコードの紹介を記事にする
Manjaro(Arch)をメインにした話
Ubuntuが起動不可となってしまったので人気の高いManjaroをインストールしてみた。
さよならUbuntu pic.twitter.com/I6NjLQh1Ro
— lock@JK (@LockDef) 2019年4月29日
Ubuntuと比べて消費電力がわずかに下がっていて結果的には満足してるが不満もある。
インストールに苦戦
インストール時にユーザー設定がうまく行かないとエラーが出てきた
— lock@JK (@LockDef) 2019年4月29日
その後、LiveUSBを作り直したり試行錯誤していたらユーザー名にlockと入力していたことがエラー原因だと分かった、つらい
SublimeText3が動かない
起動するとユーザーの操作を受け付けなくなってしまった。
メインエディタのSublimeを封じられるのはかなり厳しいのでどうにかしたい、つらい
Mecabが無い
pacman(ArchLinuxのパッケージ管理)にはMecabが無かった、データサイエンスをやる上で必要なものが無いのはつらい、つらい
githubからダウンロードしてインストールしようとしたら
checking whether the C compiler works... no configure: error: in `/home/user/ダウンロード/mecab/src/mecab-0.996': configure: error: C compiler cannot create executables
と言われてしまった、gccもg++もclangも入ってるのに不可解なことを言ってくるエラー文に腹が立つ
タスクバーが下にある
上にしろ
でもManjaro使いやすい
文句を並べたが、Manjaro使いやすいと感じてる
最初に不便を感じることは覚悟でArchを選んだので不満に感じる部分は一つずつ解決していくつもり
最後に
今までありがとうUbuntu
高専キャリア全国大会第三回に参加してきた話
lockdefです
2019/03/30に開催された高専キャリア全国大会でプレゼン（LT）してきました。
旅路
秋葉に寄ってから開催場所に行きました。
秋葉まじやばかったです。
どこを見ても美少女でした。美少女に囲まれて生活をする秋葉オタクが羨ましいです。実質ハーレムです。
初手にビックカメラに行きました。開店まで20分あったので入り口でミニアキバたんを眺めて過ごしました。
秋葉たん pic.twitter.com/TFiGAP645r
— lock@JK (@LockDef) 2019年3月30日
開店後はLenovoPCを眺めてました。ThinkPadが欲しいです。
等身大アキバたんに会いました。店員さんにアキバたんの場所を聞いたら嬉しそうに教えてくれました。
アキバたんに会った pic.twitter.com/gm1cFGthet
— lock@JK (@LockDef) 2019年3月30日
11:35発11:50着で代々木に行きました。
代々木は別世界
代々木を歩いての感想は、下水の香りがする街です。
マンホールの上を歩くたび下水でした。町並みは秋葉とは全く違いましたね…。
迷いつつ着弾しました。
対戦よろしくお願いします。
LT
タイトル「AIに文章と絵を書かせる」
プロフィールから始まり、LSTMとGANについて説明した上で学習結果を進捗として紹介しました。手法の説明に時間を割きすぎて結果の部分が２秒ぐらいしか見せれなかったので、LT終了後にTwitterで結果を晒しました。
#高専キャリア
— lock@JK (@LockDef) 2019年3月30日
スライド最後が早すぎてあまり見せれなかったAIが生成した美少女晒します。 pic.twitter.com/qizcCtJp9M
交流
高専生イベント初参加だったので初対面の人しかいませんでした。めちゃくちゃ疲労しました。
でも楽しかったです。頑張って顔を忘却しないように定期的に思い出してます。
オタクみんな名刺持ってました。名刺作らなきゃ。
同じ1年生と話せなかったのが心残りです。
研究室でAIやってたり仕事でAIやってたりG検定の本を出してたり、AI関連の人とたくさんお話出来て自分の未熟さを知りました。２年が終わるまでにAI完全に理解したいです。
おわり
秋葉の文章量多くなりましたがキャリアの内容が薄いわけではないです。はい。
アイデアソンも良かったです。
次があれば再び参加します。対戦ありがとうございました。
