統計的自然言語処理ーことばを扱う機械

岩波データサイエンス Vol.2

岩波書店の岩波データサイエンス、統計的自然言語処理ーことばを扱う機械を読みました。

Facebookの背景透明グレーで今なにしてる？のとこ

背景透明グレーで「今なにしてる？」の背景が白色のとこがどうなっているか見てみた。

html 

<div data-reactroot role="dialog" class="_3u13 _3e9r _3u14 _1b3n">

　<div class="_3u15" role="presentation"></div>

　<div class="_3u16">

　　<div display="block">

　　　<div data-reactroot class="_s7h _36bx _4a60 _4-u2 _4-u8" data-testid="react-composer-root" id="rc.u_jsonp_2_j">

css

１、背景透明グレーは。

._3u14 ._3u15 {

　bottom: 0%;

　opacity: .6;　/* ←透明６０％*/

　transition: opacity .3s;

}

で、presentationのとこにopacity: .6;を効かせて、透明にしている。

._3u13 ._3u15 {

　background: #000; /* 黒色*/　/*←くろ*/

　bottom: 100%;

　left: 0;

　opacity: 0;

　position: fixed;

　right: 0;

　top: 0;

　transition: opacity .3s, bottom 0s .3s;

　z-index: 310;

}

で、background: #000;で黒を透明にして、透明灰色。

２、あと「今なにしてる？」の白色は、

._3u14 ._3u16 {

　position: relative;

　z-index: 311 !important;

}

で、<divの括りを一つ前方に出して

._4-u8 {

　background-color: #fff; /* 白色 */

}

で「今なにしてる？」の背景を白色。

Facebookのアップロードメモ

Facebookのようなアップロード操作のUIを書いてみたくて、ソースを見たのでメモ。

１、グレーの点線に真ん中に＋が描いてある。ここは<a>タグで作ってある。枠線の色はcssで次。

　border: 2px dashed #dddfe2; /* 薄いグレー*/

　border-radius: 2px;

　box-sizing: border-box;

　display: inline-block;

　height: 100px;

　margin-right: 5px;

　position: relative;

　width: 100px;

２、アップロードした画像はサムネイル表示される。サムネイルは削除、タグ付けができる。hover時には濃い半透明のグレーで網掛けになる。

html

<span>

　<div class="_jfc" style="width:100px; height:100px;">

　　<button class="_jfe" type="button" ←削除ボタン

　　<img class="img" src="画像ソース" width="100" height="100">

　　<div 

　　　<button ←タグ付け

　　　<button class="_jfi" ←写真を編集

css

._jfc:hover .jfh, ._jfc:focus ._jfh, ._jfe:focus~._jfi._jfh, ._jfc ._jfh:focus, {

　opacity: 1;

}

._jfc:hover ._jfi:after, ._jfc:focus ._jfi:after, ._jfe:focus~._jfi:after, {

　background: rgba(0,0,0,.4);

　content: '';　

　height: 100px;

　position: absolute;

　width: 100px;

}

._jfi:after {

　content: '';

　height: 100px;

　position: absolute;

　transition: all .5s;

　width: 100px;

}

Webデザイン ホームページ作成の手順

Webシステムを作るのに、画面まわりの進め方がわからず調べた内容をメモ。参考にしたのはGoogle検索で「」でヒットした次のページ。

webデザインに関するmygirlsのはてなブックマーク

１．企画

• 目的を明確にする
• そもそもなぜホームページを作成するのか？
• 掲載内容を書き出す

２．設計

• ホームページの構造を決める
• 　「サイトマップ」を作成
• 各ページの構造を決める
• 　「ワイヤーフレーム」を作る

３．制作

• 画像やテキストを用意する
• デザインを作る
• 「デザインカンプ」というデザイン案を複数作る
• 「レスポンシブデザイン」
• アドビの「PhotoShop」

自分がプログラマーなのでいきなりコーディングから入ってしまう癖があります。その結果、作りも見栄えもバラバラになってしまう。そもそも画面まわりの仕事の進め方がわかっていなかったと気づきました。

これからの仕事に活かしたいと思います。

アルゴリズム・サイエンス:入口からの超入門 (アルゴリズム・サイエンスシリーズ 1―超入門編)

アルゴリズム・サイエンス:入口からの超入門 (アルゴリズム・サイエンスシリーズ 1―超入門編)を読みました。途中まで。

学生さんに、なぜコンピュータが役立つのかのとっかかりとなる説明に始まって、コンピュータとプログラミング言語、技術の要素にまで、理解しやすいようにつなげて説明してくれている。

はじめに電卓とパソコン（CPU、メモリ）の比較を例に挙げて、複数の値を変数にとっておけること、カッコを使った演算がMCとかM+とかよくわからないボタンになっているのを、人間が読める形（プログラム）で、マシン語ではなく、扱えるようになっていて、繰り返し処理が得意とかとか。

画像処理や、数値データの活用の案件にむけて、知識増強したくて、このシリーズを読んでみようと思って手にとりました。

次を読むかは未定（今現在の案件には直結してこないので）。入社して２、３年の若手に、技術の入り口に立ち戻ってもらうのにはよいのかな。

アルゴリズム・サイエンス:入口からの超入門 (アルゴリズム・サイエンスシリーズ 1―超入門編)

Java言語で学ぶデザインパターン入門 マルチスレッド編

結城浩のJava言語で学ぶデザインパターン入門 マルチスレッド編を読みました。

java.util.concurrentパッケージが追加されたことで増補版がでたものです。

Javaを使用し始めた当時ではjava.util.concurrentパッケージなど無く、java.lang.Threadを使ってゼロからのプログラミングが要求されたけど、現在はパッケージを使うことで、より簡単に実装ができます。

ちょうど最近見ていた案件で、java.util.concurrentを使用したソースコードをメンテすることがあり、Java1.4時代で知識停滞している自分にとってjava.util.concurrent.Future、ExecutorServiceを使っての説明が参考になると思って読みました。

増補改訂版 Java言語で学ぶデザインパターン入門 マルチスレッド編

Java言語で学ぶリファクタリング入門

結城浩のJava言語で学ぶリファクタリング入門を読みました。

案件では、じっくりとソースコードをメンテナンスする時間を取れない（取らないといけないのに。定時が終電のような状況では難しい）ので読んだだけ。いつか役立てれるときにもう一度読もう。

Java言語で学ぶリファクタリング入門