チラシの裏の設計書

プログラム開発、データ分析からロボット作りまでものづくり全般を思うがままに書き連ねたブログ。

コンペ記録メモ その3

またチラシの裏なんだ。すまない。

 

このコンペの途中経過メモです。

deepanalytics.jp

徐々に順位を落としていましたが、なんとか盛り返して2位に浮上。

もうこれ以上盛り返せる気がしない。

f:id:stkdev:20171010010559p:plain

 

と、本当にメモだけになってしまうので、コンペにてスコアが上がるきっかけになったものをメモ。そのうちきれいにまとめたい。

 

・結果はちゃんと可視化しよう

 → 分析用プログラムが完成してくると「今回はちょっとパラメータ変えただけだから結果のグラフ化とか省略していいやー」となってしまうことが多いけど、ちゃんと可視化しよう。一部分で過学習起こしてて、直したら結構スコア伸びた。

 

・変数追加すりゃいいってわけでもない

 → 機械学習全盛時代なので「とにかくデータ集めてぶっこめ」となりがちですが、その変数がモデルにどう寄与してて、どこが表現しきれてないかをちゃんと見ていったほうがいい場合も。あと変数増やすことによるデメリットも。

 いやもっと自分に超絶機械学習スキルがあれば、なんでもモデルングができるのかもしれませんが。

 

・勘と経験は強い

 → ここ数年で引越ししまくってるので、いろいろ思い出した。

 

・・・次はちゃんとした日記書こう。

 

コンペ記録メモ その2

今日もチラシの裏メモ。

 

参加中コンペが、もう当分ないであろう好調具合なので記念メモ。パート2。

 

deepanalytics.jp

こちら順調に順位を下げると思いきや踏みとどまって5位キープ中。

f:id:stkdev:20170921000934p:plain

 

飛び入り参加したこちらは順調に順位を上げて9位まで到達。

deepanalytics.jp

f:id:stkdev:20170921001108p:plain

 

いや、皆さんが本気を出してくる終盤戦についていけないのは目に見えてるんですけどね。

 

ただ、両方とも試したい分析手法は実装し切れてないのでがんばる。

コンペ記録メモ

(単なるチラ裏)

 

なんか奇跡的に2位をキープしている記念。きっと今だけ。

deepanalytics.jp

 

f:id:stkdev:20170906025900p:plain

 

ちなみに投稿時に分析手法を入力するアンケートがあるんですが、

"SVM"や"k-NN"などかっこいい分析アルゴリズムが並ぶなか、おもむろに”Other”を選び「集計しただけ」と書いています。

 

万が一このまま入賞してしまうようなことがあれば、「レコメンドに協調フィルタリングなんていらんかったんやー」というレポートを提出しなくてはいけなくなるのでそれは困る。

 

Webデザインの流行を振り返る [-1からWeb作成 その1]

これまでの流れ

Webページ作ることになったよ

 

Webデザインの流行

まずは事前知識としてWebページってどういうデザインが流行ってるんだ?というのを見ていきます。

記憶を頼りにこんなデザイン流行ってたなぁというのを列挙して見ます。

 

ポータルサイト

f:id:stkdev:20170903145348p:plain

引用:Yahoo! JAPAN

名前は勝手につけてます。

Yahooに代表されるように、2列や3列、情報を細かく区切ってぎっしり表示するようなデザインです。昔はWebは文字で情報を伝える手段という色が強く、効率的に情報を整理した結果な気がします。

今でもポータルサイトではこう行ったデザインが多いですね。

 

昔はこのデザインのように行列に区切ったレイアウトをするためにテーブルレイアウトという技術があってだね(ry

 

Web2.0/RIA

2007,8年あたりでしょうか、Web2.0という言葉が流行語になったように、ユーザーとの双方向性やユーザー体験(UX)が重視された頃です。

この頃にはダイナミックに動くアニメーションやFlash技術などが用られ、Webの進化(というかブラウザの進化?)が強く現れた、、、ような気がします。

派手さと試行錯誤の時代、と言ってもいいでしょうか。

 

フラットデザイン

https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Windows_8_Start_UI.svg/250px-Windows_8_Start_UI.svg.png

引用:Modern UI - Wikipedia

2010年あたりでしょうか?デザインがガラッと変わって「のっぺり」としたデザインが流行します。

RIAの反動とも取れますし、スマートフォン時代の到来とも取れます。モバイルファーストが叫ばれた時代でもあります。レスポンシブデザインなんかもこの流れですね。

Windows8のモダンUIやAndroidのマテリアルデザインをはじめ、企業のロゴなんかもこぞってフラットになりました。

また、文字がもつデザイン性を活かすタイポグラフィーなども注目されていました。

 

現代風?

さて、それらのデザインを経て今の流行はどんなものがあるか見てみます。

シネマグラフ・ヒーローヘッダー

f:id:stkdev:20170903151150p:plain

背景で動画が流れるWebが一部で注目を浴びました。

高速な回線や動画サイトの普及もあって実現したものですね。かなりインパクとはありますが、しつこくなりすぎないように工夫は必要です。

また一見写真のように見えますがちょこっとしたアニメーションが入っており、印象的な演出を行うシネマグフという技法も流行中のようです。

 

画像はyoutube動画を背景にできるjQueryプラグインです。次回以降どこかで紹介。

http://www.seanmccambridge.com/tubular/

 

パララックスサイト 

f:id:stkdev:20170903153037p:plain

引用:Vestfrost — Producer of morozylnыh cameras Refrigeration and technics

縦に長く、スクロールによって色々なアニメーションやアクションが起こるサイトです。

フラットというかシンプルな色合いをベースにしてアニメーションで印象を加えたり、逆に写真をふんだんに使って立体感を持たせるなど様々な応用が見られます。

 

ミニマルデザイン・グリッドレイアウト・スプリットレイアウト

f:id:stkdev:20170903152612p:plain

引用:https://zerofinancial.com/

 

画面を広くシンプルに使うミニマルデザインも増えています。

逆に画面をグリッドに区切るデザイン、カード型に区切るデザイン、分割してそれぞれ別のコンテンツを置くスプリットレイアウトなども増えており、2000年以降の流れがより洗練・応用されているような印象を受けます。

 

 振り返りだけで随分長くなってしまったので一旦区切ります。

次は実際に作るサイトのデザインをどうするか、デザインの第一歩目の部分をまとめていきます。

 

 参考:

2017年デザイントレンドガイド

https://www.behance.net/gallery/47810259/2017-Design-Trends-Guide

-1からWeb作成する プロローグ

よーし、真面目に連載らしい連載するぞー。

 

なに連載するの?

友人の依頼でWebページを作ることになりました。

大掛かりなWebシステムではなく個人用のちょっとしたものなので、そんな大変なものでもないんですが、せっかく作るなら綺麗なものを作りたいです。

 

モチベーション?

で、そんなちょっとしたものをブログに書こうと思ったのは、Webサイトを作るためのプログラム技術とか基盤とかの情報はネット上にいっぱいありますが、最初(ヒアリングしたりデザインしたり)から最後(公開して運用)までまとめてるとこってあんまないなぁと思ったからです。

個人が趣味程度にWebページ作る時でも色々やることあるんだよ、という啓蒙と共に、おそらく色々と古くなっているであろう自分のノウハウにマサカリを投げてもらおうという魂胆です。

”-1から”となっているのは古い知識をアップデートするという意思を込めてます。どうでもいいけど。

 

-1からWeb作成 連載その0

趣味でWeb作成を請け負う心構え

プロローグなので、どんなサイト作るとかは次回からにして、Web作成を依頼された時の心構えでも書いておきます。なんかこう書くとすごい堅い話に見えちゃいますが、基本チラシの裏ブログなので(略

 

SIerとかで働いてる仕事柄、仕事以外でも「ちょっとWebページ作ってよー」的な依頼はちょこちょこあります。

昔(学生のころ)なら面白がって作っていましたが、職業としてシステムを作り出してからは基本的に無料では受けないことにしています。

イラストレーターの業界でも問題になっていますが、いくら仕事外でも無料で受けてるとITの価値を下げることになりかねないです。

とはいえ、今回みたいな友人の依頼に対して「じゃぁ1.5人月ぐらいだからxx万円ね」みたいなSIerじみたことはしたくないので、ちょっとご飯奢ってもらうとか利益が出たらギフトカードもらうとかそんなのでいいかなという感じです。0と1の差はでかいです。

 

真面目っぽいことも書いた気もしますが、基本は趣味なのでゆるーく連載していきますよー。

 

 

コーヒー飲んだり書いたり

単なる一言日記です。まさにチラシの裏

 

CoffeeScriptが不人気な理由を実感している今日この頃。

 

理想

「あんのややこしいJavaScriptを理解しなくても、わかりやすく綺麗にしかも多様なブラウザに対応できるようにかけるぞー!うおーー!」

 

現実

「さーて、結局デバッグのためにトランスパイラされたJS読みますかー・・・、あーわかんね。」

 

いつの間にか不人気ランキング3位です。

昔は割と書きやすくて好きだったんですが、最近使う機会が増えて使えば使うほどこれはしんどいなと。

 

・・・まぁ結局JSちゃんと理解しとけって話ですけどね。

 

MacでRails動かすまでの覚え書き

Ruby on Rails動かすためにMacに構築したものメモ。

Qiitaに投稿するには類似記事が多かったのでこっちへ。

 

とりあえずXCode入れる

→AppStoreから

→OSアップデートしろーと出たらおとなしくアップデートする

その後、XCode Command Line Toolsをインストー

xcode-select --install

 

 Homebrewを入れる

パッケージ管理ソフト。必要なパッケージを簡単に入れれるようにするもので、いろいろ種類はあるけど最近はこれがよく使われるらしい。

Homebrew — macOS 用パッケージマネージャー

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

Rbenvを入れる

Rubyのバージョンを管理してくれるもの。複数のバージョンを共存させれる。

Homebrewを入れていたら、以下の手順でインストールと設定ができます

brew install rbenv

echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

source ~/.bash_profile

 

Rubyを入れる

rbenvを使ってRubyのインストールと設定を行います

利用できる Rubyのバージョンは

rbenv install -l

で確認してインストールを行います。

その後利用したいバージョンをglobalとして設定します。

rbenv install 2.4.1

rbenv rehash  #反映

rbenv global 2.4.1

 

Bundlerを入れる

次にRubyのライブラリの管理ソフトbundlerを入れます。

Bundlerはプロジェクトで利用するライブラリとそのバージョン、依存関係なんかを管理してくれるものです。

Bundler自体もRubyのライブラリの一つなので、まずBundlerを入れて、他のライブラリはbundler経由でインストールすると便利です。たぶん。

gem install bundler

 

参考:Bundlerの使い方 - Qiita

 

Railsインストール1

Ruby on Railsも1行でインストールできます。すごい。

gem install rails

rbenv rehash

 

Railsインストール2~bundlerで入れる~

Rails自体も複数のバージョンを共存させたりプロジェクトごとに変えたい場合はbundlerでインストールしておくということもできます。

まず

bundle init

を行うと、設定ファイルであるGemfileが作成されます。

そこにある

gem 'rails'

という記述を有効にして

bundle install --path vendor/bundle

を実行。(2回目以降はbundle installのみで可)

これでrailsがインストールできました。動作確認は

bundle exec rails s

を実行して

http://localhost:3000/

を確認。