IT業界のすみっこ暮らし

ふと気がついたときの記録

css2less.net:CSSをLESSに変換

CSS to LESS

既存のCSSをLESSに移行する必要があったのでCSS⇒LESS変換ツールを使いました。 www.css2less.net

元のCSSの書き方に問題がなければ、LESS変換後、そのままコンパイル出来ます。

css2less.netの特徴

CSS内の色とフォント設定、背景色を最初に変数として宣言してくれます。
変数の宣言はこんな感じです。

@color_1: #fff;
@color_2: #000;
@font_family_1: arial, helvetica, sans-serif;
@background_color_1: #ffaa00;
@background_color_2: #666;

~以下、CSSをLESSに変換~

その他のツール

beautifytools.com CSSからLESSへの変換可能。
css2less.netみたいに変数の宣言はしてくれません。

javascript:keydown/keyupイベントのキーコード一覧

原文 JavaScript keydown/keyup events: key codes

keydown/keyupイベントによるキーコード一覧

Opera MSIE Firefox Safari Chrome Key pressed
8 8 8 8 8 Backspace
9 9 9 9 9 Tab
13 13 13 13 13 Enter
16 16 16 16 16 Shift
17 17 17 17 17 Ctrl
18 18 18 18 18 Alt
19 19 19 19 19 Pause, Break
20 20 20 20 20 CapsLock
27 27 27 27 27 Esc
32 32 32 32 32 Space
33 33 33 33 33 Page Up
34 34 34 34 34 Page Down
35 35 35 35 35 End
36 36 36 36 36 Home
37 37 37 37 37 Left arrow
38 38 38 38 38 Up arrow
39 39 39 39 39 Right arrow
40 40 40 40 40 Down arrow
44 44 44 44 PrntScrn※1
45 45 45 45 45 Insert
46 46 46 46 46 Delete
48-57 48-57 48-57 48-57 48-57 0 to 9
65-90 65-90 65-90 65-90 65-90 A to Z
91 91 91 91 91 WIN Key (Start)
93 93 93 93 93 WIN Menu
112-123 112-123 112-123 112-123 112-123 F1 to F12
144 144 144 144 144 NumLock
145 145 145 145 145 ScrollLock
188 188 188 188 188 , <
190 190 190 190 190 . >
191 191 191 191 191 / ?
192 192 192 192 192 ` ~
219 219 219 219 219 [ { ※2
220 220 220 220 220 \ |
221 221 221 221 221 ] }
222 222 222 222 222 ‘ "

※1、殆どのブラウザでPrntScrnのキー認識が行うのはKeyupイベントのみ。
※2、キーコード219はWinキー(開始)と対応。


ブラウザごとに異なるキーコード一覧
Opera MSIE Firefox Safari Chrome Key pressed
173 173 181 173 173 Mute On|Off
174 174 182 174 174 Volume Down
175 175 183 175 175 Volume Up
186 186 59 186 186 ; :
187 187 61 187 187 = +
189 189 173 189 189 - _


NumLockオンオフによるキーコード一覧
All of the above browsers (NumLock On/Off) Key pressed
96/45 Numpad 0 Ins
97/35 Numpad 1 End
98/40 Numpad 2 Down
99/34 Numpad 3 Pg Down
100/37 Numpad 4 Left
101/12 Numpad 5
102/39 Numpad 6 Right
103/36 Numpad 7 Home
104/38 Numpad 8 Up
105/33 Numpad 9 Pg Up
106/106 Numpad *
107/107 Numpad +
109/109 Numpad -
110/46 Numpad . Del
111/111 Numpad /

20170802ブクマ

github.com

qiita.com

qiita.com

gendai.ismedia.jp

qiita.com

qiita.com

qiita.com

qiita.com

qiita.com

qiita.com

qiita.com

qiita.com

広告を非表示にする

Google Authenticatorのニ段階認証関連メモ

tech.sanwasystem.com

www.jerriepelser.com

stackoverflow.com

QRコード生成

on-ze.com

$('#qrcode').qrcode({width: 64, height: 64, text: 'otpauth://totp/System%3aaccount?secret=MXHAXGZ63RCPPGSWV2CTJRU6&issuer=System'}});

※例:qrcodeUrlは「otpauth://totp/System%3aaccount?secret=MXHAXGZ63RCPPGSWV2CTJRU6&issuer=System」

C# 自動プロパティ

stackoverflow.com

ufcpp.net

自動プロパティ(get/set の中身の省略)

public string FirstName { get; set; }

プロパティ

private string firstName;

public string FirstName
{
    get
    {
        return this.firstName;
    }
    set
    {
        this.firstName = value;
    }
}

最近省略プロパティばかり使ってるせいか、久々に省略してない方のプロパティを書こうとしたらStackOverflowExceptionが出たので恥ずかしながら復習。

広告を非表示にする

【Deep Learning Lab コミュニティ イベント 第2回】に参加してきました。

Deep Learning Lab コミュニティ イベント 第2回」に参加してきました。
先月6/19に参加したイベントに続いて2回目のイベントです。 dllab.connpass.com

pie001.hatenablog.com

f:id:papamau:20170725143451j:plain:w400

タイムテーブル

時間 セッションテーマ 登壇者
15:05 オープニング 日本マイクロソフト株式会社
15:05-15:25 PFN 深層学習事例紹介、PFN/MSアライアンス テクノロジーアップデート
株式会社Preferred Networks エンジニア 渡部創史
15:25-15:45 機械学習・深層学習 コンサルティング事例セッション 日本マイクロソフト株式会社 アーキテクト 早川武志
15:45-15:55 NVIDIA Guest Session エヌビディア合同会社 エンタープライズマーケティング 佐々木邦
15:55-16:15 実用としての深層学習 ~深層学習の利用事例と展望~ 株式会社UEI 代表取締役社長兼CEO 清水亮
16:15-16:35 深層学習の導入で抱える課題とユースケース実例 株式会社Ridge-i 代表取締役社長 柳原尚史
16:35-16:50 トレーニング展開アップデート、学生インターンシッププログラムのご紹介 日本マイクロソフト株式会社 深層学習 事業開発マネージャー 廣野淳平
16:50-18:00 懇親会

個人的な感想としては前回のキックオフと一部の内容が重複していたのは残念だと思いましたが、今回の参加が初めての方も多かったので仕方ないと思いました。内容全般では株式会社UEIと株式会社Ridge-iのプレゼンがかなり興味深かったです。特にビックデータあるあるには笑いました。

今回は前回に比べてNVIDIA社も参加して、インフラ環境に関しても軽いですが触れたのはとても良かったです。必要なときのみクラウド環境のGPUを使う等の発想も新鮮でした。

dllab.connpass.com

Deep Learning Lab コミュニティ イベント 第3回」は9/4(月)に開かれるらしいですが、同じ週のPyCon JP 2017 - connpassに参加するため、今回は見送ることにしました(PyCon JP 2017と同じ週なのを知らずに申し込みしてしまい、止むを得ずキャンセル…)。第4回ももちろんあると思うので、そのときは参加したいと思います。


最後に

f:id:papamau:20170725212418j:plain:w300

今回は思い切って懇親会に参加したら…なんとジャンケンに勝って人数限定のイベントTシャツをもらいました!やったー!?みんなとペアルックだ!?おかげでちょっとテンションが上がりましたw主催の方々ありがとうございます(*´∀人)

追記 20170802

発表のうち、印象深かったプレゼン内容をまとめてみたので、追記。

『深層学習の導入で抱える課題とユースケース実例』

1、AI導入の流れと課題
  • AI導入の流れとボトルネック
     現在は人材不足が AI導入を阻む最大のボトルネック。導入完了までの道のりが長い。

  • 「AI」という言葉の曖昧さ
     「自然言語解析」、「機械学習」、「統計解析」どれでもAIである。

  • ディープラーニングのパターン
     万能モデルは存在しない!目的に応じて選ぶ必要がある。

  • ニーズとシーズのギャップ

    • ユーザーがAI活用を企画するための知識・理解の不足
    • 「AI」技術が日進月歩で急激な変化
    • 一つの「AI」で解決できるほど汎用的ではない
2、AI導入ケースと課題
  • 某社が進めている案件と相談例
    • 自社製造の運搬機器を映像で検出して動線解析を行いたい
    • 白黒映像の彩色作業の手間が多く、AIで何かできないか
    • 焼却炉の運転をAIで自動化したい
    • 損害保険会社での事故査定にAIを活かしたい
    • 徘徊老人をAIで探したい
      相談内容は玉石混合!きちんとしたヒアリングとコンサルで見極めが重要!
      効果が見込めない案件は早めの見切りも重要!
3、損害額 査定AI「ビックデータあるある」
  • ビックデータ活用あるある

    • 車の損害状況・損害額を画像から見積りたい
    • 「いまあるビッグデータを使ってほしい」
  • ビックデータあるある その1

    • データがそもそも不整形(画像の縦横比率もバラバラ)
    • 対象物体が映っているアングルが揃っていない
    • 対象物体以外に色々映りすぎ
    • 顧客データのマスキング、セキュリティ確保
      データはそのまま使えない!教師データを抜き出すだけで一つのプロジェクトになる。
  • ビックデータあるある その2

    • 正解ラベルに大きな偏り
    • 画像と正解ラベルが一致していない
    • 同じ画像でも、作業者、画像外要因で結果が違うことも
      入力データにモデル構築するのに十分な情報が入っていない場合が多い。
      現状の誤った出力に、モデルをあわせる、という本末転倒なケースもある。
  • まとめ

    • いまあるデータに拘らない柔軟な姿勢
    • 機械学習ディープラーニングを活用しやすいデータを貯めよう
    • 将来の競争優位のために早めのデータマネージメント戦略が重要
4、「シーズよりニーズ」
  • いい技術でも、ニーズ側の活用イメージがわかないと意味がない!
  • ニーズの絞り込み と 機能特化は サービスの基本
  • 100%の精度を求められる案件より、プラスアルファの効果が評価されるニーズがよし
  • 教えてみせ、モデルとUIまで用意してみせ、POCやってみせ、初めてユーザーはAIをわかってくれます。「山本五十六
5、最後に
『きちんとテーラーメードしていきましょう』
  • 適切なニーズで光るシーズ
  • いまあるデータ+これからためるデータ
  • 目的に沿ったカスタマイズと評価
     この辺りをスキップできる、汎用AI はありません!

以上

【OpenToonzでアニメを作ろう!】に参加してきました。

ioio.connpass.com

最初、connpassで偶然見つけて、興味本位で申し込みしたのがきっかけです。
今までアニメを作ったことも、OpenToonzを触ったこともありませんが、オープンソース基盤のアニメ制作アプリという点が気になりました。

f:id:papamau:20170716140711j:plain

場所はYahoo! JAPAN内のコワーキングスペース「LODGE」
初めてだったのでかなり迷いました…

f:id:papamau:20170716144648j:plain

OpenToonzとは

OpenToonz - アニメーション制作ツールのオープンソースプロジェクト

githubのREADME.mdの説明によると

2D アニメーション制作ソフトウェアです。 イタリアの Digital Video 社が開発し、株式会社スタジオジブリのカスタマイズを経て、ジブリ作品の制作に長年使われてきたソフトウェア Toonz が基になっています。

ということらしいです。

opentoonz.github.io

github.com 基本言語はC++みたいです。開発は主にドワンゴ社が中心となって行なっているようです。

先月参加して頂いた【Deep Learning Lab コミュニティ キックオフ】にドワンゴさんと協力してアニメの中割りを自動作成するような機能の研究内容があったのですが、ニコニコ動画の運用をやっているからか動画制作の方に凄く力を入れてる印象を受けました。

twitter.com

タイムテーブル

時間 予定 内容
13:00 受付開始
14:00~15:00 基本説明 OpenToonzの基本的な使い方を解説します。
15:00~17:00 制作 実際にアニメーションを作ってみましょう!
分からないことは遠慮せずに講師に質問してください!
17:00~18:00 作品発表 出来上がった作品をみんなで鑑賞しましょう!

正直OpenToonzをインストールしたのが前日の7/14(金)の深夜でなんの事前準備もない状態での参加だったので、イベントの間サンプルのダウンロードやらmp4形式のレンダリング用のファイルやらのダウンロードにかなり時間が掛かり、流れに追いつかない状況が多々ありました。

ですが、講師の方が4人?ほどいらっしゃって手をあげればすぐに来てくれて対応してくれたので、なんとか最後まで作品作りをすることが出来ました。本当にありがとうございました。

f:id:papamau:20170716144527j:plain

講師の紹介

泉津井 陽一さん

twitter.com

この動画はイベントでも紹介されました!

OpenToonzではじめるアニメーション制作 (I・O BOOKS)

OpenToonzではじめるアニメーション制作 (I・O BOOKS)

OpenToonzの本を書いた方です。
この本は帰宅してからamazonで注文しました。

他にも3人ほど講師さんがいらっしゃったのですが、twitterで検索して確認出来た方が泉津井 陽一さんしかなくて…本当にお世話になりました。

最後に

制作で作ったものがこちらになります。 http://i.imgur.com/eTEyP4l.gif ※mp4をgifに変換したものです。

ほぼイベントで提供されたサンプルデータのトレスですが、
初めて動かしたときはちょっぴり感動しました。

また今度初心者向けのOpenToonzのイベントがあれば参加してみたいです!

Spark Notebookインストール手順

pie001.hatenablog.com

Apache Sparkに引き続き、Spark Notebookを入れてみた。

参考:Quick Start

spark-notebook/quick_start.md at master · spark-notebook/spark-notebook · GitHub

1、http://spark-notebook.io/からダウンロードする

※初めての場合は一番最新のものをダウンロードするよう書いてあったので、そのようにした。

2、適当なフォルダに圧縮ファイルを解凍する

3、spark-notebookを実行する

2で解凍したフォルダに root directoryを変更し、下記のコマンドで実行

bin/spark-notebook

4、ブラウザからlocalhost:9001を開く

f:id:papamau:20170701180412p:plain

メニューによっては実行の際に必要なライブラリーが欠けてたりしててエラーが出る場合もあるけど、一旦起動出来た!