Webフルスクリーンページの作り方
フルスクリーンページの章を勉強したので、それを活かして既存のWebページを真似てみます。
フルスクリーン参考ページ
WepページはI/O 3000の中からフルスクリーンで絞って選びました。
io3000.com
そしてとてもシンプルな下記サイトを参考にさせて頂くことにしました。
junhashimoto.jp
またトレースをするために画像をダウンロードする必要がありますが、ChromeのプラグインでImage Downloaderという非常に便利なものがあったのでそちらを使って素材を取得しました。
フルスクリーンの背景画像を設定する
フルスクリーンページで最も重要なのは、なんといっても画面いっぱいの画像です。特に写真のポートフォリオサイトや、企業で印象づけたいことを写真や画像を使って大きく表示することで、ユーザーに商品や企業カラーなどのインパクトを与えることができます。
そのためまずはナビバーをそれっぽく作った後、背景画像を設定します。なお、今回はレイアウトがテーマなのであまり細かいところは気にせず真似てみます。
最初の状態
最初はこのナビバーだけちょちょっと作ります。
そこに背景を設定します。
background-image: url(./images/img-mv.png);
すると問題が発生します。
画像を設定しただけでは、画像が繰り返す設定となっており非常に格好悪いです。そこで繰り返しを解除します。
background-repeat: no-repeat;
その他表示位置等も整え、最後に背景画像の大きさを指定します。この大きさの指定が初心者が「やりたいけどどうやれば。。。」となるポイントかもしれないです。
背景画像の大きさを指定するにはbackground-sizeというプロパティを使用します。そしてその値でもcoverを設定することで縦横比を保持したまま背景を完全に覆うサイズに縮小拡大をしてくれる便利なCSSとなっています。
最終的にはこんな感じになりました。
#index { background-image: url(./images/img-mv.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }
こうすればどれだけスクロールしても背景は固定されたままにできました。
そしてもう一つやってみたいことがあります。それは背景に写真をフルスクリーン設定するんですが、上に重なるテキストの見やすさを考慮して黒い網目を被せるやつです。次回はこれについて調べてやってみます。
日程調整アプリのデータベース設計〜ワイヤーフレーム編
前回は日程調整アプリを作るために要件整理をしました。
okerra.hatenablog.com
今回は具体的にどのような画面にするかを考えていき、そこからデータベースのエンティティや属性を抽出してリレーションシップのモデルを完成させることをゴールとします。そのためまずはワイヤーフレームを作ります。
ボトムアップ分析
ボトムアップ分析は既にシステムがある場合や、どのような表示をするかの画面情報を基にデータベース設計をしていく手法です。メリットは画面情報から情報を抽出するだけなので漏れなく抽出しやすいことのようです。
その反面ボトムアップ分析だけでは既存のシステムにはあるが、今回の案件で新しく追加された要件などは確実に漏れてしまうので必ずトップダウン分析と両方の実施が必要とのことでした。
ワイヤーフレームの作成
使用するTool
画面設計とデータベース設計はDraw.ioというフローチャートやオフィスのレイアウトなど図を作成できるツールを使用します。
Flowchart Maker & Online Diagram Software
画面イメージ
実際に作った画面がこれです。これをベースにモデルを作っていきます。
エンティティの抽出
画面からまずエンティティになりそうな情報を抽出しました。
リソース系エンティティ
- イベント
- 参加者
イベント系エンティティ
- 開催する
- 回答する
属性の抽出
リソース系エンティティの属性を抽出する際の観点は、
エンティティを具体的に説明する情報を洗い出す
イベント系エンティティの属性を抽出する際の観点
だれが、いつ、何を、どのくらい、いくらという観点で情報を洗い出す
回答エンティティ(Answer)
- ある開催の（PK,FK)
- ある候補日に（PK,FK)
- ある参加者が（PK,FK)
- 出欠情報を
識別キーもこの３つがないと出欠情報を一意に特定できないので、おそらくこれは合っている気がします。
開催エンティティ(Hold)
- あるイベントを(PK,FK)
- ある日に
うーん。開催エンティティは何かコレジャナイ感、、、そんな匂いがします。
開催エンティティが不要な気がするし、少なくともイベントエンティティと統合した方が良さそう。
あと開催候補日のエンティティがいることにも気づいたため以下のように変更しました。
これを日本語にして読んでみます。
【参加者】が複数【回答する】、複数の【開催候補日】を持った【イベント】に
さっきよりかは悪くない。ただカーディナリティがなんかまだ違う気がします。。。
ただ気がつけば8時間続けて作業しておりご飯も食べてなかったので今日はこれにて終了。
日程調整アプリのデータベース設計〜要件整理編
今週は会社の専門教育セミナーでデータベース設計を受講してきたので、それを振り返りながら実際にアプリのデータベース設計をしてみようと思います。
先週立てたHTML/CSSの目標はいいのか！？と思いつつもせっかく受けたセミナーなので今振り返りをしておきます。
日程調整アプリについて
題材は日程調整アプリをRallsを使って実装してみます。なぜ日程調整アプリかというと会社で困っているからです。私は若手のため飲み会担当なのですがセキュリティが無駄に厳しくて、世にある便利な日程調整サービスを使えないんです。(まさかのExcelでやってます)
既に会社でRailsを使ってチーム用のWebページを作っているので、それを拡張するのがゴールとなります。会社でチーム用Webページを作った際も私なりに工夫したので、年内にはブログを書こうと思います。
日程調整アプリの要件整理(トップダウン分析)
まずは要件の整理を行います。実はデータベース設計をするときにいきなりテーブルを考えていたのですが、それが出来ていたのは簡単な内容だったからだと思います。これからはちゃんと要件の整理と画面設計をやってからやってきます。
トップダウン分析は要件からエンティティや属性を洗い出す分析方法のことです。
目的としてはボトムアップ分析では見つからない、現システムにはないが新しい要件定義にはあるといった情報を漏れなく抽出すること。また将来的に拡張したい要件なども抽出して、後の手戻りをなくすといったことも目的のひとつであるようです。
が、今回はとりあえず要件だけ記載します。データベースのモデル設計は後半のボトムアップ分析で検討します。
イベントの作成
- イベントを作成し、一覧を表示できること。ただし見られたくない場合を考慮し、表示するかしないかは任意で決めれること。
- イベント作成時に日程の選択肢を◯△✕形式か◯✕のみかを選択できること
- イベント作成後はURLを表示すること
- イベントは削除できること
- イベントのIDは特定できないようにランダムの数字を使うこと
イベントの表示
- イベントの表示画面には日程と参加者の回答、日程ごとの集計結果を表示すること
イベントの編集
- イベントは日付を自由に追加できること
- イベント名は誰でも修正できること
- 回答者名を修正できること
- イベントや回答者は削除できること
こんなもんでしょうか。実は学習内容の振り返りとブログ用に文書化したので要件はかなり雑です。。。許して下さい
とりあえず前半は以上。今日中に実際にリレーションシップモデルの検討までやってみます。メインの後半に続く。
勉強会に参加していつもよりちょっとだけ上手くいった話
昨日仕事終わりに大阪で開催されていたモバイルアプリの勉強会に参加してきました。
その振り返りをやっていきます。
勉強会の振り返り
まず勉強会の内容について、、、、ははッ。9.5割何言ってるか分からん
モバイルアプリの内容なんてチンプンカンプンで気になったキーワードを取り出すだけで終わりました。せめてそのキーワードについて調べてみます。
Robi
ロビとは「話せて」「歌って踊れる」とても可愛らしいロボットです(キャッチがアイドルみたい)
スマホとWifi接続したら音声認識でRobiに話しかけれるらしい。そのためスマホアプリを作って発話をバイナリ化してデータを送っているらしい。とりあえず感想としてはロボットも面白そう。なんか人とIT技術のインターフェースとなるロボットにとても可能性を感じました。
Azure
初めて聞いたAzureというキーワード。なぜか気になったので調べてみます。
参考
Microsoft Azureをより良く知るための基礎知識【第1回】 | IT Leaders
調べた感じ、データセンターやサーバー運用を全部上手くやってくれるプラットフォーム？
IaaSとPaaSを包含したクラウドサービス らしい。よく忘れるのでメモ。
（1）IT基盤の要素となる仮想マシンやOS、仮想ネットワークなどを提供するIaaS
（2）データベースやWebサービスなどのミドルウェアおよびランタイムなどを提供するPaaS
（3）アプリケーションを提供するSaaS（Software as a Service）
おそらくAWSと対比されるサービスのようで、とりあえず世の中の常識的なキーワードのようです。今回はとりあえずそれを知ったので良しとします。。。
心に残った言葉
作ったとは言ったが、役に立つとは言ってない
今回とても心に残った言葉です。もしかしたら笑わせるつもりで言ったのかもしれませんが、エンジニアが成長するためにはとても重要な考え方だと思いました。気になったことはやってみる。絶対に役立つものを作る必要はなく、そこから何か学び得ることの積み重ねが必要だと思いました。
エンジニアの価値はそれぞれ
言葉はちょっと違うかもしれないですが、ポジティブになれた言葉です。エンジニアなら全員が絶対にプログラミングがバリバリ出来る必要はないのかなと。もう少し私は私らしく目指すエンジニアになっていこう、と思えました。
HTML/CSS学習のはじまり
早速HTMLとCSSの勉強をしていきます。
勉強の題材にした本
HTML&CSSとWebデザインが１冊できちんと身につく本
まだ6割程度しか読んでいませんが、初心者には非常にわかりやすい本となっているようです。
この本の良い点
- webサイトの基本レイアウトを作るためのHTML/CSSの知識がまとめられている
ほとんどのHTMLとCSSの勉強本はHTMLやCSSタグの説明がメインでそれ使って何ができるか、という内容が多いように思います。で、さぁWebページを作ってみよう・・・わからん！上手くレイアウト出来ない！となってしまいます。
しかしこの本はその逆で、Webページの基本レイアウトであるフルスクリーン、シングルカラム、2カラム、グリッドの4パターンを作るために必要なHTMLとCSSが書かれています。
そのため何か作りたいものがあるが、どうすればイメージしているレイアウトが作れるかわからないといった人には涙が出るほど嬉しい本となっています。
目標の見直しと修正
１．２週間でやり遂げる（早く次のjQueryを勉強したいので）
と書きましたが、早くも目標変更です。1ヶ月ぐらい(年内)を目標にします。理由は早く完了させることに意味がなさそうなので。。。それよりもフルスクリーン、シングルカラム、2カラム、グリッドの4パターンを勉強し、何かしらの既存Webページのトレースっぽいものをしてしっかり身につけることに変更します。
１．1ヶ月を目標にやりきる
２．ブログを書く
３．学習した基本レイアウトの知識で既存のWebページのコピーを1つは作ってみる
さて長くなりましたが、最初はフルスクリーンからやっていきます。
TechAcademyを利用してWebアプリケーションを学び始めた話
おおよそ半年前、私は何を思ったか急にWebアプリケーションを学び始めました。
学習方法は独学だと何年もかかりそうだったのと、必ず途中で挫折するだろうと思いTechAcademyというプログラミング学習ができるオンラインブートキャンプを利用しました。
最初の1.5ヶ月でRailsアプリケーションの作り方を学び、次の1.5ヶ月でフロントエンドを学びました。お金をケチってしまい短期間コースにしたので、正直寝る間も惜しんで勉強したのですが短期間で確実にアプリを作れるようになり、利用して本当によかったと思います。
で、次の1ヶ月はとにかく頑張ってRailsを使ったWebアプリケーションを作っていたのですがここにきてちゃんとHTMLとCSSの基本を抑えようと思い以下の本を購入。
HTML&CSSとWebデザインが１冊できちんと身につく本
目標
１．２週間でやり遂げる（早く次のjQueryを勉強したいので）
２．ブログを書く
３．０から自分でサンプルを作ってみる
ブログを書こうと思ったのはTechAcademyのメンターとしてついて頂いた方の、このブログの影響です。
これらを目標にちゃんとキレイなページが作れるように勉強していきます。
.append()で<a href="".....><img src=""...>を付け加える
こんな基礎中の基礎のことでも結構躓いてしまったため、これもメモメモ。
jQueryでとあるwebAPIを使って、複数の画像を取得して表示する。といったことを動的にやりたい。
その際に、取得した画像を<a href="".....><img src=""...>のリンク付き画像を表示したいので、.appendを使います。
// 空の<div>を作る
var $div = $("<div>");var $item = $("<div>", {"class": "cover-art__item",})
.append($("<a>", {
href: "sample.html",})
.append($("<img>", {
src: "sample.jpg",
width: 180,
height: 180,
}))
);// $divを#mainに追加する
$div.appendTo(".XXXX");
ポイント
ハマってしまったのがカッコのくくり方です。ご注意を
.append( $("<a>",{ herf:XXX, })「)←ここにいれない」
.append($("<img>", {src: XXX}))「)←ここ」
