WEBディレクターをやっていて、ウェブカツやっててよかったこと その3

こんにちは。製造業の会社でWEBディレクターをしています。
1年以上かけて担当してきたサービスがいよいよ終盤に差し掛かっています。
システムインテグレーターに発注して、検証もいよいよ終盤。来月にはサービスの公開が控えています。

プログラミングとは関係なく、「エンジニアも金のことを気にしてよ」という記事です。
ウェブカツで「技術力だけあってもだめ」というのをよく見るので、書きました。

つい最近SEの方からこんなやりとりをしました。
SE: そういえば、「検収」って9月でしたよね〜
私 : すみません、こちらは10月と思っていましたが…
SE: そうだったんですか、あとで営業からも連絡しますね。

検収とは、WEBサービスが完成して、発注側がOK出すことですね。
作り手が完成と思っていても、発注側が認めないと検収があげられません。
そして、発注側がお金を支払うのは検収をあげた月を基準に決まります。
たとえば、9月検収、10月支払いという感じです。

私は相当焦りました。1年以上かけて進めてきたので、安い金額ではありません。
社内で案件の管理を行っており、検収時期を早めるということは少し面倒です。
それに9月も下旬に差し掛かっています。すぐに部長に相談しました。
案の定部長も渋い顔です。今までのやりとり、状況をもう少し確認することにしました。

そして営業の方に確認すると、
私: 検収時期、9月という認識でしょうか?
営業: それなんですが、すみません。弊社の事情で検収だけ9月にあげさせて
いただけないでしょうか。支払いは11月でかまいませんので。
私: そうだったんですか。それでしたら、社内でも対応できると思います。
(それ、早く言ってよ〜)

ウェブカツでの「技術力だけあってもだめ」というのを感じました。
金に関することなので、もっと丁寧に伝えてくれたら良いのになと感じました。
始めから営業の方の伝え方であれば、部長に相談する必要もありません。

この辺りの経理的な仕事は、決して難しくはないですが絶対にミスできません。
支払い時期の認識が違って放置したら、最悪支払い遅れになります。
個人的には大きな負担になっているので、なんとかスムーズに進めたいです。

最後まで読んでいただいてありがとうございました。

ウェブカツ学習メモ FLOCSSでSASSを整理して学んだこと

こんにちは。
ウェブカツで学びながら、WEBディレクターをしています。

ここのところ、以下レッスンの宿題にかかりきりであまり先に進めませんでした。
Lesson13|CSS設計〜ディレクトリルールまで決めたFLOCSS〜
宿題は、SASSのファイルをFLOCSSの規約に基づいて書き直すというものです。
今日ようやく形になったので、ブログを書きます。

<1>成果物はこちら
・実際のみため
https://htmlcssjavascript0716.com/01_flocss_exmple/

・SCSSの構成などを見るためのGitHub
https://github.com/khosokawa0716/flocss-example

<2>かかった時間
12時間

<3>学んだこと
・CSSを書き直すには、HTMLファイルのクラスとの紐付けを調査する必要がある
・CSSの正解は分かりづらい。HTMLのクラスと紐付けがなくても、
文法として正しければ成立してしまう。
・SASSでネストするときに、異なる階層に同じクラス名を使わない。
・分割したscssを統合するapp.scssの記述は、上から読み込まれる。
_var.scssを下に記述にするとコンパイルできない。
・jsのプレフィックスは必ず付けておく。
・style.scssからapp.scsslに変更する場合は、package.jsonのscriptの記述も修正する。
・GitHubへのアップロード方法

<4>感じたこと
12時間。まさか宿題に着手する前にこれだけの時間をかけるとは思いませんでした。
始める前は、1時間もかからないだろうとタカをくくっていました。
だってHTMLとCSSですよ。いくらウェブカツの上級コースと言ったって、
一応業務でHTMLとCSSは触っていますからね。
しかもたった1ページでしょ。それに1からコード書くわけではなくて、すでに出来ているのを
直すだけでしょう。完全になめてました。

ファイルを分けるところまでは良かったです。
ブログに記載がある通りに、ファイルを分割していきました。

つまづいたのは、containerの扱いです。まずクラスのままにしておくのか、
Idに変更するのか。まぁ大した問題ではないですよね。どちらからに決めればいいだけです。
ところがもとのコードを見ていると、、、、、
Container-titleが2つあります。containerの直下とcontainer-ornamentの中にも
Container-titleがあります。

この紐付けを確認するのに、かなり時間を使いました。
クラス名なんて、エディタで一括置換すればいいでしょと思っていましたが、
そういうわけにはいきません。スタイルがあたっているところを確認しながら、
一つずつ変更をしました。
それでもいったんコンパイルしてブラウザで確認すると、間違っているところがありました。
SASSの入れ子の構造はとても便利ですが、気をつけないと大きな不具合になりそうです。

個人的な好みですが、id(#{)はcssに使わない方がよいと思いました。
id=contactのところにcssが書かれていなかったので、うっかり消してしまいそうになりました。
Htmlのリンクとして使われていたんでした。

アウトプットが足りなくて、いろいろ調べながら修正したため時間がかかりました。
でもいいんです。こうやって宿題を与えられてアウトプットできたんですから。
GitHubにコードをあげたのも初めてです。

レッスンは進んでいないですが、たくさんの収穫がありました!

最後まで読んでいただいてありがとうございました。
GitHubのコードも読んで、コメントいただけるとうれしいです。↓もう一度PR
https://github.com/khosokawa0716/flocss-example

WEBディレクターをやっていて、ウェブカツやっててよかったこと その2

こんにちは。製造業の会社でWEBディレクターをしています。
1年以上かけて担当してきたサービスがいよいよ終盤に差し掛かっています。

システムインテグレーターに発注して、製造に半年かかったものを
社内メンバーで検証を行っています。
検証もいよいよ終盤。来月にはサービスの公開が控えています。

今までは、自分が指示したロジックのとおりにできているか、
自分の指示に漏れがないか、WEBサービスとして期待通りの動きをするか、
DBの値は間違っていないかなどを検証してきました。

大きな不具合もようやく潰せてきた今、ちょっとデザイン整えようかなと。

そもそも予算の関係でデザインは外注できず、WEBデザインを学んだことも
ない状態で自分がやることになりました。
AdobeXDとか使えたらかっこいいですが、Excelのオートシェイプで
ぺたぺた画面デザイン作っていました。

そんなインプットなので、ボタン1つとっても色がばらばらでした。
インプットがいい加減なのは仕方ないけれど、似た機能のボタンは
色を揃えてくれればいいのにな….

そういえば今朝勉強した ウェブカツの
「Lesson13|CSS設計〜ディレクトリルールまで決めたFLOCSS〜」
プロのエンジニアが書いたCSSなら分かりやすいに違いない。
どれ、ちょっと開発ツールで見てみよう!

……
……
……

なんじゃこりゃ〜〜
Bootstrap使っているけれど、CSSめちゃくちゃだ。
1つのボタンにborder-radiusが3箇所くらいついている!
htmlファイルのdivタグの中にstyle書いてあるで…..

ボタンの共通のデザインとして、border-radius:3px;をお願いしようと
していますがやめました。

おそらくプログラムの修正箇所は1箇所ではないでしょう。
こちらで検証するときに全画面のボタンを全部見なければいけないです。

最低限の修正をお願いするにとどめました。

知識がついて怖いこともありますね。読んでいただいてありがとうございました。

WEBディレクターをやっていて、ウェブカツやっててよかったこと その1

こんにちは。メーカーでWEBディレクターをやっています。
プログラムは1行も書かないのですが、社内SEの方や発注先のSEの方と
よくお話します。
ウェブカツをやっていて、よかったなと思ったことがあったので
ブログに残しておこうと思います。

この間javascript・jQuery部 中級でJSONを学びました。
写経しただけなので、まだまだ自分のものにはなっていません。
でも以下のような概念は記憶に残っていました。
・javascriptはブラウザ上の制御だけでなくサーバーとのやりとりもおこなう
・JSONは画面すべてを読み込むことなく、一部だけを更新できる

SEの方との会話
私:WEBサービスAの利用環境について確認させてください。
 javascriptは使っていますか?(ブラウザ上の設定でOFFにしても使えるのかどうか)
SE:使ってますね。
私:以前、計算はサーバー側で処理されるとお聞きしたので、Javaで
 書かれていると思ったのですが。
SE:確かに計算の処理は、サーバーで行われるんですが
 ボタンを押したらJSONで値を渡しているので、受け渡しには
 javascript使っているんですよ。

SEの方なら普通の会話だと思うのですが、つい最近JSONを学んだ
私としてはなんとなく意味が理解できるだけでとてもうれしかったです。

会社での役割を考えれば、そこまでの知識は必要ないのですが、
自分の担当しているサービスがどんな風に作られているのか分かると楽しいです。