ABOUT
『RIEMITSU』は管理人の私がサイト制作において、よく使うものや知っておくと
便利だなと思ったものを忘れないようにアウトプットしながら整理してみるための
プライベートブログです。
でもせっかくなので、誰かのふとした疑問のヒントや参考になればと思い発信しています。
また、ついでに私のつつがない日常の出来事なども書いてみたりしたいと思います。
About REMITSU website
Web 【Web】
Web制作に関する私的に便利だな、覚えておいたらいいなという気づきを紹介します。
Usual ly【日常】
私の日常生活においての気づきや面白かったことやあ～あというような出来事をつらつらと書いています。
筆不精なので、しばらくごぶさたしている友人やお世話になった方々など、近況報告も兼ねられたらいいなとも思っています。
Else Action 【その他の活動】
その他、現在は無期限休業していますが、役者業について、気が向いたときに書いています。
About me
山口県出身、大阪経由、現在東京在住、役者を経て現在Web制作を生業としています。
PC等デジタル音痴だった私が、偶然、HTMLに出会い興味を持ってしまい現在に至りました。
まだまだ、知りたいことも知らなきゃいけないこともてんこ盛りですが、
楽しんでいきたいと思います！
Profile
| 名前: | 黒岩 里恵（Rie Kuroiwa） |
|---|---|
| 血液型: | B |
| like: | 猫 犬 公園 東京事変 読書 うたた寝 海 晴れの日 ホラー映画 |
My Skill Level
| HTML: | 主にHTML5で作成、 実務経験8年 |
|---|---|
| CSS: | CSS3使用、実務経験8年 |
| Java Script: | jQuery、JavaScript、AngularJS、Angular |
| Framework | IONIC3にてアプリ構築レベル |
| php | 独学にて初歩レベルの理解 |
| Word Press | 自主テーマ作成可能レベル |
| DreamWeaver | 基本的操作可能、 制作時に使用できるレベル、最近はBrackets派！！ |
| Illustrator | 基本的操作可能レベル |
| Photoshop | 基本的操作可能、 制作時主に使用 |
| Flash | 基本的操作可能レベル |
My Portfolio
今までに担当したWebの仕事の一部をご紹介します。
ViVianカラコン通販NAVI
| SITE NAME | ViVianカラコン通販NAVI |
|---|---|
| 制作担当 | HTML/CSS コーディング Webサイトデザイン スマホサイト一部デザイン スマホサイト一部コーディング モバイルサイト一部デザイン モバイルサイト一部コーディング |
| 制作期間 | 1ヶ月 |
ViVian Lady というブランドのカラーコンタクト商品のECサイトです。
主なターゲット層は10代～20代。初めてPC向けサイト、全ページのデザインからコーディングまで一貫して任されたサイトです。既存のスマホサイトの色合いを取り入れつつ作成しました。
Club HERO
| SITE NAME | Excellent club HERO |
|---|---|
| 制作担当 | HTML/CSS コーディング モバイルサイトデザイン モバイルサイトコーディング |
| 制作期間 | 2週間 |
ホスト界では超有名なZEROグループさんの当時新店舗の一つ「club HERO」さんの公式HPです。私が2012年初めてHTML5とCSS3を使用してコーディングしたサイトでした。まだまだ、コーディングもようやく慣れてきたばかりのところ、「HTML5で書いてみろ」と上司の方のお達しで、おっかなびっくり、調べながらコーディングしていったのを覚えています。その挑戦の場を下さった上司の方には今でも感謝しています。
また、今では珍しくないCSS3ですが、当時、CSSでアニメーションができるとあってとっても作るのが楽しくて色々と試しながら作成していました。とはいえ、サイトの雰囲気やターゲット層を考慮し、アニメーション的要素はキャスト写真をマウスオーバーした時に画像が大きくなるのと、バナーをオーバーした時にゆっくり薄くなるまでに抑えました。
恵みワン
| SITE NAME | 恵みワン | 制作担当 | HTML/CSS コーディング スマホサイトデザイン スマホサイトコーディング モバイルサイトデザイン モバイルサイトコーディング |
|---|---|
| 制作期間 | 2週間 |
シニア向けのサプリメント販売サイトです。ターゲット層に合わせ、全体的に文字や画像も大きく分かりやすい作りになっています。LP的要素と一体になっているため、サイト作成後もちょこちょこ修正を重ねていきました。
ページ数は少ないのですが、スマホサイト、モバイルサイトとデザインからコーディングまで一貫して作成させていただきました。
IONIC3を用いたタブレット専用予約管理アプリ開発
| プロジェクト編成 | デザイナー1名、フロント2名、開発10名、ディレクター2名 |
|---|---|
| 使用ツール | IONIC3、VSCode、scss、SVN、Redmine |
| フロント担当、主な実装画面 |
・ドラッグにて入れ替え可能の商品一覧画面 ・画像アップロード機能付き商品登録ページ ・カテゴリ一覧、編集、追加一体型フォーム ・フォームバリデーション機能 ・保存データストレージ保存機能 ・ソート機能付き予約一覧画面 ・タブレット内アルバムより画像選択機能 ・カメラ撮影画像アップロード機能 |
| 制作期間 | 8か月 |
このプロジェクト以前に他のアプリ作成プロジェクトのヘルプ要因として、IONIC1を触ったことはあったものの、IONIC3ではAngularのバージョン5になり、IONIC1のAngularJSとは互換性がなく、また、いちからの学習となりました。
しかしながら、IONIC1ではscssをコアラを用いて自らコンパイルしていたのですが、IONIC3では自動コンパイル機能が加わっており、その手間が省けるようになっており、感動しました。
それはさておき、プロジェクトメンバー全員Angular初体験の中、学習と構築の平行線にてのアジャイル開発となりました。AngularはtypeScriptで書くため、これまた初体験、型定義に泣かされつつ、なんとかリリースを終えました。
その他このアプリにはレジ機能もつきました。
苦労はしたものの、ものすごい大きな経験をさせていただきました。
Angularを用いた業務管理ツール開発
| プロジェクト編成 | フロント2名、開発10名、ディレクター2名 |
|---|---|
| 使用ツール | Angular、VSCode、SQLManager、Backlog、Git、SVN、SourceTree |
| フロント担当、主な実装画面 |
・集計画面実装 ・新規追加フォームのデフォルト自動入力機能実装 ・API通信により取得したデータをPDF、またはEXCEL出力・保存機能 ・その他機能追加、バグ対応等 |
| 制作期間 | 1年 |
このプロジェクトには欠員が出てしまったため、急遽、途中参加でした。
Angular7でバージョンが上がるとそれだけ書き方も変わりました。また、Rxjsもさらにsubjectを頻繁に使用。
そして、このプロジェクトの何よりの特徴はクライアントの主なブラウザがIE11であったこと、そのため、webkit系の見た目と、違った場合はとにかくIE11メインで考え、他は切り捨てるという苦渋の選択を余儀なくされました。
このツールではとにかく膨大なデータを扱うため、APIより取得した複数のデータをすり合わせての表示データの抽出等、ただデータを取って出すだけでなく、いかに効率よく、わかりやすくまとめて出せるコードをかけるかなど、勉強させていただきました。
また、フロント要員が足りなさ過ぎて、開発の方にも、フロント側を手伝っていただき、いろいろな方の書き方を見ることができたのもよい経験となりました。
