スキップしてメイン コンテンツに移動

webデザインの初仕事

イメージ
投稿者:
12年SEやってたけれど、業務システムのバックエンドの設計&進行管理が主戦場だったので、webデザインの実務経験はゼロ。しかし個人でIT便利屋やるなら「ちょっとしたホームページ」の依頼を引き受けられるようになりたい(webサイト、とか言うお客さんではない)。

それで、いつもお世話になっている農家さんのホームページを、いわば練習台として、リニューアルさせてもらった。
ホームページ・ビルダーの「どこでもレイアウト」なる機能で作られた、プログラマ泣かせな現状から、、、

・CSSを使う(!)
・レイアウトや色などに一貫性を持たせる
・メンテナンス可能なソースコードに
・ヘッダやナビなどを部品化(別ファイルにしてjQueryでロード)
・Windows固有フォントを使ってた → Webフォント利用(Google Noto Sans, さなフォン麦。ともに第一水準までのサブセットのみ)

で、(自分が)耐えられる状態にして、機能面の強化は

・別途(Wordで)作っている「週刊おたより」を画像ギャラリーで閲覧できるようにする(colorbox 利用)
・Facebook Page Plugin設置
・注文フォーム設置 (フォームズ(http://www.formzu.com)利用)
・取扱店リストのGoogleマップ (Excelにリスト→住所から緯度経度算出→Googleマップにアップロード)

くらい。
諸々の合間、というか深夜に気力が残ってた日にポツリポツリ進行だったから3ヶ月かかった。
「2000年の手作りホームページ」から、2008年くらいまではアップデートできたのではないか。


さて、それで積み残しというか、2015年のそれなり品質に追いつくべく、やりたいことが色々あるのだけど

・開発環境を整える
・GruntかGulpかなんか
・Compass+Sass
・Coffeescript
・Git/Github
・レスポンシブ
・コンバージョンへ誘導できるサイト設計

どれから手を付ける?!
ていうか、どれに手をつけても初めの一歩が泥沼! 実現手段の選択肢が多すぎる! 
って感じで困っている今。

とりあえずscss書いてcompassでコンパイルすることにしたんだけど、たちまち
・ディレクトリ構成どうする
・そのパスはcompassのconfig.rbにどう書けばいい
・compassコアのどれどれを＠importすべき？
・normalize.css 使えばいいの？
・bootstrap 使うや使わざるや
・css code convention?
とかとかに悩んで１行も進まない。
先人が既に悩んで、各人は答えを見出しているんだろうけど…。

web starter kit 使えばいいのかナア。でもあんまり積極利用されてる雰囲気見えないんだよな。


コメント

コメントを投稿

このブログの人気の投稿

GAS 同一カラムを複数条件でfilterできない件

投稿者:
Google Apps Script でSpreadsheetをデータベース代わりにwebアプリをポチポチ作ってて、スクリプトからSpreadsheetにフィルタかける場合、同一カラムに複数条件を設定できないことを知って残念……。 フィルタのかけ方はこんな感じ。 日付を範囲指定したいけど、After、Before片方しかつけられない。 var dataFile = SpreadsheetApp.openById(DATA_FILE_ID); var sh = dataFile.getSheetByName(LOG_SHEET_NAME); var criteriaDateAfter = SpreadsheetApp.newFilterCriteria().whenDateAfter(new Date(targetDate)).build(); var criteriaUserEqual = SpreadsheetApp.newFilterCriteria().whenTextEqualTo(user.id).build(); if (sh.getFilter()) { sh.getFilter().remove(); } var r = sh.getRange(1, 1, sh.getLastRow(), sh.getLastColumn()) .createFilter() .setColumnFilterCriteria(DATE_COL, criteriaDateAfter) .setColumnFilterCriteria(USER_ID_COL, criteriaUserEqual) .getRange(); FilterCriteriaに2回条件設定してみたり var criteriaDateRange = SpreadsheetApp.newFilterCriteria() .whenDateAfter(new Date(date1)) .whenDateBefore(new Date(date2)).build(); 同じカラムに2回条件設定してみたり var r = sh.getRange(1, 1, sh.get...
コメントを投稿
続きを読む

ジップロックで堆肥づくり

投稿者:
2012/11/02『家庭でできる堆肥づくり百科』を見てビニール袋と生ゴミで堆肥づくりに初挑戦。 ・生ごみ　250ml　(細かく刻む) ・庭の土　120ml ・水　大さじ2 ・アルファルファ粉末　大さじ1 (ウサギのペレットを砕いた) 袋はジップロック大を使用。 毎日揉む(切り返し)、1日おきに空気を入れ替える。4～8週間でできるらしい。 保温のことは書いてなかったけど発砲スチロール箱に入れてみた。うまく行くといいなあ。 2012/11/07 道路掃除の方に落ち葉をもらったので一掴みいれてみる。生ゴミは窒素やや多めらしく、炭素系の落ち葉を足したらいいかなと。 2012/11/12 10日経ってニオイが落ちついてきたかも。腐ってる臭いではないけどツンとする臭いがずっとしてた。発泡スチロール箱を蓋すれば気にならない(ジップロックには全く遮断されないので、袋だけで室内に置くのは避けたい)。材料がネギとミカンなせいかなあ。見た目は一向に変わらず。
コメントを投稿
続きを読む

その4 Excel VBAでAmazon Product Advertising API

投稿者:
引っ越すためついに本気で書籍リストを作っていると、どれほど少しでも省力化したくなり、しつこくバージョンアップ。 ISBNのない外国の本も検索したい ISBNのない本が思ったより多かった。フランス語のアクサンとか入力したくない。ISBNでの検索はamazon.com, amazon.frなど検索先を切り替えているように、タイトル等での検索も各国サイトを利用したい。 最初は「jpで見つからなければcom、見つからなければfr、、、」と思ったけど、だいぶ待たされちゃうし、その本のデータをどこで探したいかは決まってるので、それぞれ別のプロシージャを定義して実行できるようにした。 Public Sub searchBookInfoFromAmazonFr(dummy As Integer) searchBookInfo (amazonFr) End Sub さて、クイックアクセスツールバーに登録するのだけど、用意されてるアイコンじゃわかりづらい。各国の旗がいいんじゃないか。と思ってからが長かった・・・が、まとめれば： 旗アイコンは ここ で入手。 Ribbon Editor でリボンに自前のタブ・ボタンを登録 対象のExcelファイルを開く 右のDocument Explorerペインで「CustomUI Parts」を追加 表示される編集ペインのImageタブを開き、好きな画像を追加(From File System) Codeタブに下記Xmlを書いて保存、終了 Excelを開くとカスタム・ボタンが登録されているので、ふつうにクイックアクセスツールバーにも登録 <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <ribbon startFromScratch="false"> <tabs> <tab id="customMacro" label="custom macro"> <group id="custo...
9 件のコメント
続きを読む