読者です 読者をやめる 読者になる 読者になる

gocha124の日記

ごちゃごちゃ書きます

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のとこ)

 

support.apple.com

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

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

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

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" ←写真を編集

 

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のはてなブックマーク

 

1.企画

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

2.設計

3.制作

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

 

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

 

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