業務に使えるWebアプリにしないと#1
だめだよなぁ。素人丸出しなもんじゃ。
登録の機能
操作しやすさ。
ファイルはドラッグ&ドロップ。
お絵かき。
引用貼り付け。
下書き。下書き一覧。
検索。
キーワード検索。
誰のいつの記事か(何日前の表示)。
概要(全てのテキストじゃなくて一部だけ)
画像があれば画像を1つ、2つ。
閲覧。
しおり。
コメント。
メニュートップ。
最近の登録(投稿)
お知らせ。
で、あと共通のものとして。
ヘッダー。アプリ名。ユーザ名。オプション。を表示。
URLはURLとして使えること。
リンクで辿っていける階層も必要だろう。
辞書、類義語。
単なる検索、登録ができればではない。そういう機能をいかにストレス少なく使い続けてもらえるよう細やかな気づかいを実装できるか。仕組みに運用を見据えたものを盛り込めるか。
また更新しよう。
Webアプリづくりのお仕事で思うこと
そもそも何が目的とした取り組みであるのか。それに必要な道具が提供でき、道具として提供できないところは、どうするのか。それでやりたいことができるのか?
PGMer的には、WEBアプリ作るぞ、コードを書くぞ、知っているソフトウェアや開発言語を使ってやれることやるぞ、と、狭い範囲で考えてしまう。けれども、本当に実現してほしいことを実現することになるのか。手を動かし始めると目的を忘れてしまう・・・あぶないけどありがち。
データの登録画面を作る。何が必要か。検索の画面は?閲覧の画面は?エントリーとなるページは?何が必要か。
はてなのようなブログ作成、公開の仕組みが非常に参考になる。というか、こういうものが使えれば、個別に作る必要もない。とはいえ会社で使うものなのでオープンなサービスを使うわけにもいかず、似たようなものをOSSで探したり手組みしたりする。
そういう切なさはあるけれど、誰かがやらないと、誰かが困ったままの状態になってしまうし、お仕事なので喜んでやらせていただく。
で何が必要か。
Solrのオプション
Apache Solrのインデックス、schemaについて備忘。
名前 | 値 | 説明 |
indexed | true | インデックスにする。 |
required | true | 必須かどうか。trueが指定されている項目なしでSolrにインデックス追加しようとするとエラーになる。 |
stored | true | 値をインデックスファイルに含める。 |
multiValued | true | 複数の値が入るかどうか。配列みたいなもの。trueとfalseでのできること、できないことの違いがわかってません。 |
termPositions | true | 形態素を使う場合に指定する? |
termVectors | true | 形態素を使う場合に指定する? |
termOffsets | true | 形態素を使う場合に指定する? |
調べた内容で更新します。
MacBookの操作メモ
買ったは良いがWindowsからキーボード操作の変化にくるしみ中。
操作をメモ。
操作 | ショートカット |
アプリの切り替え | command+tab |
WindowsのAlt+Tab相当 | |
アプリを終了 | command+Q |
コンテキストメニュー | control+クリック |
デスクトップを表示 | control+Mission Control(F3のとこ) |
統計的自然言語処理ーことばを扱う機械
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">
1、背景透明グレーは。
._3u14 ._3u15 {
bottom: 0%;
opacity: .6; /* ←透明60%*/
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;で黒を透明にして、透明灰色。
2、あと「今なにしてる?」の白色は、
._3u14 ._3u16 {
position: relative;
z-index: 311 !important;
}
で、<divの括りを一つ前方に出して
._4-u8 {
background-color: #fff; /* 白色 */
}
で「今なにしてる?」の背景を白色。
Facebookのアップロードメモ
Facebookのようなアップロード操作のUIを書いてみたくて、ソースを見たのでメモ。
1、グレーの点線に真ん中に+が描いてある。ここは<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;
2、アップロードした画像はサムネイル表示される。サムネイルは削除、タグ付けができる。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" ←写真を編集
._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;
}