ハニワマンさんのコーディング課題をコーディングしてみました

ハニワマンさんのコーディング課題をコーディングしてみました。
コーディング課題に挑戦しようと思った理由や作成方法などを書いていこうと思います。

ハニワマンのコーディング課題は以下のURLから確認できます。

https://note.com/haniwaman/n/nefa48db83682

コーディング課題に挑戦しようと思った理由

今回、ハニワマンさんのコーディング課題に挑戦しようと思ったのには理由があります。
実はわたしはAdobe Illustratorからコーディングしたことがありませんでした。

そのため1件、コーディング案件に挑戦しそこなったのです。
そこで今後、Illustratorからのコーディング案件があった場合には応募できるようにIllustratorからコーディングしてみたくなったのでした。

ちなみにハニワマンさんのコーディング課題は、Illustrator以外にPhotoshopとXDのデザインカンプがあるため、これらからのコーディングもできます。

わたしの作ったコーディング

わたしがコーディングした制作物は、次のようなものです。
画像をクリックすると、制作物を掲示したサイトに飛びます。実際のコードも見れるので、興味ある方はご覧ください。

https://kotakahashi.xsrv.jp/the_company/

デザインカンプの解析

ハニワマンさんのコーディング課題を見ると、上から順に

  • ヘッダー
  • メインビジュアル(横一面に画像のある部分)
  • Headline(メインコンテンツ部分)
  • フッター

というように大きく4つのブロックに分かれています。

ブロック自体、多くはないですし、また各ブロックも複雑な構成ではありません。
初学者向きのコーディング課題だと思います。

この中で難しい部分と言えば、ヘッダーの部分と、メインコンテンツ部分の6つのタイル状の記事をどうするか? という点でしょう。
あと、このデザインカンプはパソコン用なので、スマホ用にはどのようにコーディングするかが、腕の見せ所ですね。

わたしの作成方法

まずは全体の把握から

まずデザインカンプ全体の長さと左右の余白を除いたコンテンツ部分の長さを計ります。
するとデザインカンプ自体の長さが1366px、コンテンツ部分の長さが1180pxとわかります。

続いて主な配色や、フォントファミリー、フォントサイズ、フォントの太さなどの基本的な情報をまとめます。

もっと長いデザインカンプであれば、ここから各ブロック間の共通部分のコーディングをどうするか考えるところですが、今回のデザインは分量少なく、共通部分もあまりないので(共通部分はコンテンツの長さ1180pxのところくらいでしょう)実際にコーディングに入っていきます。

簡単なところからコーディングする

わたしの場合、コーディングは各ブロックの簡単なところから作り始めます。

デザインカンプの順だと、ヘッダーからコーディングすることになるのですが、ヘッダーは情報量が多いし、スマホ対応などのときのハンバーガーボタンの設定など、面倒なことが多いので後回しにします。

そこで今回は、メインビジュアル部分とフッターから作っていくことにしました。
メインビジュアル部分の画像は背景画像として表示させる方法もあるのですが、今回はHTMLに画像を配置しました。

フッターの文言はdisplay:flexを使い、ブロックの中央に来るように配置しています。

タイル状の記事はdisplay:gridで設定

続いて Headline(メインコンテンツ部分)に取り掛かります。
この部分には6つの記事がタイル状に並べられています。

この部分について、わたしはgridレイアウトを用いて記事を配置しています。
gridレイアウトにしたことで、各記事間の余白についてもgapを使うことで余白を開けることができました。

ヘッダーはスマホ対応が面倒

最後にヘッダーを作成します。
ヘッダーはパソコン用のデザインではそれほど難しくはありません。
ロゴやナビゲーションメニューの横並びはdisplay:flexを使うことで解決できます。

しかしスマホ用のデザインは面倒ですね。
今回はスマホ用のデザインがありませんので、自分で設定しなければなりません。

わたしは画面サイズ767px以下のときは、メニューを非表示とし、ハンバーガーボタンをクリックすることで、メニューが表示されるようにしました。

メニューの動きにはjQueryを使い、slideToggleでメニューが開閉されるようにしました。

作ってみた感想

当初予想していた通り、コーディングのデザインとしては難しくはありませんでした。

けれど今回のコーディングをしようと思った根本原因である、Illustratorの使い方には困惑させられました。

特にブロック間の余白が取れないのが大変でした。いちいち手動で測らなければならないので。

今回のコーディングを完了させるのに3時間半かかりましたが、そのうちの半分以上はIllustratorの使い方に戸惑った時間でした。

とはいえ、一度使い方を覚えてしまえば、次回以降はかなり素早くコーディングできると思います。たのしい経験でした。

初めてWordPressを使ったときの失敗

初めてWordPressを使ったとき

私が初めてWordPressに触れたのは、2010年8月でした。

当時、事務所のホームページを自分で作ってみたいと思い、いろいろ調べていたのですが、どうやらWordPressというものを使えば、手軽に記事を更新できるという話を聞きつけ、自分でも使ってみることにしました。

そこで書店に行き、WordPressの入門書を数冊買ってみました。
家に帰って、実際に作業しながら本を読んだのですが、これが分からない。

本を読みながらHTMLやCSS、PHPのコードを打ち込むものの、「何かが違う…?」という疑問がぬぐえませんでした。

私が聞いていたWordPressというものは、管理画面のようなものがあり、それを操作すればホームページの更新ができる、というものです。

それなのに「HTMLのコードを打ち込むなんて…」という気持ちでいっぱいでした。

当時のプログラミングの実力

そもそも論ですが、この当時、私のプログラミング能力はほとんどありませんでした。

その当時の私は、ホームページはHTMLでできているという知識があった程度です。
CSSでさえその当時は知っていたのかどうか定かではありません。

ましてWordPressを構築するためにPHPを打ち込むのですが、PHPの知識は全くありません。

さらに言うと、今でこそ私はSublime Text(サブライムテキスト)でコードを打ち込んでいますが、この当時はWindowsのメモ帳で打っていました。

ですがプログラミングの知識がほとんどない人間が、メモ帳でコードを打ってうまくいくわけがありません。
しばらくは本の記述通りにコードを打っていったのですが、やがて行き詰りました。

そうして「やっぱり私には無理だな。プログラミングは理系人間のすることだな」と思うようになり、自分でホームページを作ることを諦めたのでした。

私が失敗した理由

今にして思えば、この当時、私が失敗した原因の一つは、本の選択を誤ったことにあると思います。

WordPressの本というのは、大きく分けると

  1. 自分でホームページを制作したい人向けの本(制作者向けの本)と
  2. 自分でホームページの制作はしないが、WordPressでホームページを運用したい人向けの本(運用者向けの本)

の2つがあります。

当時の私のレベルだと、運用者向けの本を読めばそれで十分だったのです。

でも当時の私はWordPressのことは何も知らず、運用者向けの本を探すつもりで、実際は制作者向けの本を選んでしまったのでした。

(ちなみにこのとき選んだ本の一つが、「WordPresssレッスンブック」(エビスコム著 / ソシム刊)でした。いまでこそエビスコムさんの本は評価していますが、当時は全く評価できなかったです。)

ですがこれはある意味、避けることが難しいミスだったと思います。
なぜなら制作者向けの入門書も運用者向けの入門本も、本の帯には「入門者向け」とあるので、WordPressのことを知っている者でないと違いが分からないからです。

むしろ当時の私の記録を見ると、レンタルサーバーを借りてWordPressのインストールまでは行っているので、知識がない割にはよく頑張ったというべきでしょう。

当時の自分にアドバイスをするなら…

もし今の私が当時の自分にアドバイスをするのであれば、「まずは運用者向けの入門書を選ぼう」というでしょうね。

たとえば今だったら、「小さなお店&会社のWordPress超入門」(星野邦敏著 / 技術評論社刊)あたりから始めるでしょう。

そのうえでアドバイスするならば、「デザインは気にするな」というでしょう。

その当時の私でさえ、WordPressをサーバーにインストールするところまでは行ったのですから、デザインさえ気にしなければ、そのまま自分のホームページとして運用することもできたはずです。

しかしそれをせずに(知らなかったとはいえ)WordPressの制作・カスタマイズに走ってしまった。

せっかく自分でホームページを作るのだから、いいデザインにしたいと思う気持ちは分かります。

しかし良いデザインまで自作するのは時間がかかりすぎます。

確かにデザインが重視されるサイトもありますが、個人レベルのサイトであれば、基本的にデザインなんてどうでもいいです。

それよりもひたすら記事を書き、アクセス数を伸ばすほうがはるかに大事です。
アクセスは一朝一夕では増えませんが、デザインは一瞬で変更することも可能ですから。

その当時の私がそのことに気付いていたら、もっと早くホームページの可能性に気付き、早い段階でホームページ制作を仕事にしていたかもしれませんね。

私のホームページ制作の実力(2019年5月20日現在)

私の現在の実力

できること

後々、自分のサイト制作の実力を確認しておくために、現時点での私のサイト制作の実力を書いておきます。

現在の私ができることは、基本的なホームページを作成することです。

そして基本的なホームページを作成し、それをWordPress化することができます。
つまり簡単な物でよければ、WordPressのテーマを一から自作することができます。

また、jQueryを使って簡単な動きのあるサイトを作ることもできます。
例えばスライドアップやスライドダウン、トップへ戻るボタンをクリックするとスクロールしながらサイト上部に戻る動きをつけることができます。

できないこと

できないことも書いておきます。

私ができないことはデザインですね。
デザインのセンスが良くないです。

努力すればなんとか見栄えのいいサイトが作れるのかもしれませんが、これを改善するのはなかなか大変そうです。

デザインだけは市販のテンプレートを使うか、あるいはデザイナーを雇ったほうがいいかも? と考えています。

私の勉強方法

私の勉強方法についても書いておきます。

私の勉強方法は、基本的には市販の本を買ってきて、コードを自分で打ってみるというものです。

本だけでは分からないところはネット検索しました。
その他には、ネットでProgate(プロゲート)を受講しました。

私が勉強に使ってきた本のうち、参考になったと思ったものを書いておきます。

HTML・CSSで参考にした本

  • 「HTML5&CSS3レッスンブック」 エビスコム
  • 「HTML5&CSS3デザインブック」 エビスコム

エビスコムさんの本には大変お世話になっています。
エビスコムさんの本は質が安定しているし、初心者向けの本から上級者向けの本まであるので勉強しやすいです。

なお、ここに挙げた本はfloatを使ってサイト制作をするという伝統的な制作方法を解説したものです。

現在であれば、同じエビスコムさんの著作で

「フレキシブルボックスで作るHTML5&CSS3 レッスンブック」や「CSSグリッドで作るHTML5&CSS3 レッスンブック」

があるので、こちらを読むといいでしょう。

  • 「ホームページ作成のツボとコツがゼッタイにわかる本」 中田亨

中田さんの本もいいですね。

初心者向けの本は通常、トップページならトップページ、会社案内なら会社案内、お問い合わせページならお問い合わせページというように、個々のページごとにサイトを制作していくものが主流です。

しかしこの本では、最初に各ページの共通部分を作成し、その後、ページごとに足りない部分を作成していくという方式をとっています。
実際のサイト制作に近いやり方をしている点に特徴があります。

PHPで参考にした本

  • 「独習PHP 第3版」 山田祥寛

PHPについては「独習PHP 第3版」を使いました。

PHPの文法・構文が基礎から丁寧に解説されていることと、サンプルコードが短い点が気に入っています。
ただし、PHPが全くの初心者の場合はもう少し簡単な本を選んだほうがいいかもしれません。

  • 「いきなりはじめるPHP ワクワク・ドキドキの入門教室」 谷藤賢一

初心者向けの本です。
この本は、単にPHPの文法を学ぶのではなく、PHPを使って実際のシステムを作成することを目的としています。

プログラミングを勉強しても、実際のシステムをつくれないという悩みを抱えている人は多いと思います。
そのような人はこの本で実際のシステムづくりの一端を味わってみるのもいいかもしれませんね。

この本については感想は書いています。詳しくはこちら。
『いきなりはじめるPHP ワクワク・ドキドキの入門教室』の感想

WordPressで参考にした本

WordPressの本は2種類あります。

1つはWordPressのコードを書いて、ホームページを自作したい人向けの本です(制作者向けの本)。
そしてもう1つは、ホームページの自作まではしないが、WordPressの使い方や運用方法を知りたい人向けの本です(運用者向けの本)。

同じWordPress本といっても、制作者向けの本と運用者向けの本とではレベルが全く違います。
当然、制作者向けの本のほうがレベルが高いわけです。今回、私が紹介する本はもちろん制作者向けの本です。

  • 「WordPressレッスンブック」 エビスコム
  • 「WordPressデザインブック」 エビスコム

WordPressについてもエビスコムさんにはお世話になりました。
これらの本では、WordPressの基本コードが書かれており参考になります。

  • 「WordPressのツボとコツがゼッタイにわかる本」 中田亨

中田さんのWordPress本は、WordPressの構造に触れながらサイトを制作する本です。

非常にいい本なのですが、最初にこの本を読むことはお勧めしません。
事前にエビスコムさんなど、他のWordPress制作本を読んだ後に読むことをお勧めします。

中田さんの本についての感想はこちら。
『WordPressのツボとコツがゼッタイにわかる本』の感想

JavaScript・jQueryで参考にした本

  • 「いちばんやさしいJavaScriptの教本」 岩田宇史

正直に言うと、JavaScriptについては特に思い入れはありません。どうせjQueryを使えばいいと考えているので。

ですから今回紹介した 「いちばんやさしいJavaScriptの教本」 も書店で「なんとなく読みやすそう」という理由だけで選んだ本です。

  • 「Web制作の現場で使う jQueryデザイン入門」 西畑一馬

「Web制作の現場で使う jQueryデザイン入門」は非常にもったいない本です。

内容は大変良いと思います。
jQueryの構文や使い方が体系的にまとめられており、私好みの本です。

しかし現時点(2019年5月20日)では、どうやら読者特典であるサンプルファイルがダウンロードできないようです。
以前はサンプルファイルがダウンロードできていたんですけどね。

初心者にとってサンプルファイルが使えるかどうかは大きな違いです。
サンプルファイルが再びダウンロードできるようになれば、自信をもっておすすめできる本なのですが、現時点ではこの本を積極的におすすめできないのが残念です。

平成の思い出

「平成で印象に残った出来事は何か?」と聞かれれば、私は1995年の2つの出来事を挙げるでしょう。
いずれも私の価値観に変化を与えた出来事です。

阪神・淡路大震災

1つは1月に起こった阪神・淡路大震災です。

当時、関西に地震は来ないと世間ではいわれていました。
私の家は神戸からは離れていたものの、それでも震度は3(現在の震度4に相当)ありました。

さすがに家が壊れるとまでは思いませんでしたが、「これ以上大きく揺れると本当に危ない」と思いました。

その直後、学校に行き同級生と地震の話をしたのですが、インターネットがない時代なので、他の町のことは分かりません。てっきり自分たちの町が一番大きく揺れた地域だと思っていました。

夕方家に帰り、ようやくテレビで阪神・淡路地域の現状を知ることになります。
燃える神戸の街や、落ちた阪神高速などが衝撃的でした。

一般的に「日本は安全」とか「日本人はしっかりとした(建築)物を作る」などと言われていましたが、それが本当なのか、疑問を感じるきっかけのひとつになったのがこの地震でした。

地下鉄サリン事件

もう1つ、記憶に残る出来事は3月に起きた地下鉄サリン事件です。
無差別テロというのが衝撃的でした。

それまでの日本では、いくら凶悪犯でも無関係の人間には危害を加えないという不文律があった気がします。

もちろんこれまでも自暴自棄になった者が人を殺すということはあったし、たまたま事件現場に遭遇したものが巻き添えで殺されるということもありました。あるいは無関係の人間を殺すぞと脅迫する(でも実際は殺すつもりはない)といった事件もありました。

けれど地下鉄サリン事件のように「目的を達成するため」「計画的に」「無差別に人を殺す意図を持ち」「実際に殺す」というのは類例がほとんどないのではないかと思います。

その後、警察の捜査によって松本サリン事件などの一連のオウム事件が発覚するのですが、とにかく「自分の目的のためには無関係な人間を殺してもかまわないと考えている人間がいる」という事実が驚きでした。

阪神・淡路大震災も地下鉄サリン事件も、単体でも大きな出来事ですが、それが続いたことにより、「今までとは少し違う時代になったな」 と思ったのです。

『いきなりはじめるPHP ワクワク・ドキドキの入門教室』の感想

良い本でした。

『いきなりはじめるPHP ワクワク・ドキドキの入門教室』(谷藤賢一)は、アンケートシステムの作成を通じてPHPの基礎を学ぶ本です。

プログラミングの本というのは、通常、基礎から構文を体系的に教えていくものがほとんどです。
PHPの場合だと、書き方の基礎・変数・配列・演算子・制御構文・関数・データベースなどと項目を立てて教えていくのが普通です。

これに対してこの本はアンケートシステムの作成をテーマににしており、アンケートシステム作成において必要になったときに必要な構文を教える、というスタイルをとっています。

一般的なPHP本のように構文ごとの項目立てがされていない点に特徴があります。

良い点

この本の最も良い点は、初心者が(曲がりなりにも)1つのシステムを作るというところにあります

通常のプログラミング本では、構文ごとに項目を立てて解説を加えていくのが普通です。
そのためこの方式では確かに個々の構文・文法には詳しくなります。

しかしその反面、この方法では具体的なシステムを作りづらいという問題があります。
仮に個々の構文を理解できたとしても、それがシステムの中でどのように働くのか? を理解していないとシステムを作ることはできません。

理解力のある人なら学んだことから1つのシステムを作り上げることもできるのでしょうが、初学者でそれができる人は多くはないでしょう。

もちろん通常のプログラミング本であっても、ある程度のシステムの作り方を書いてあるものもあるのですが、それが「分かりやすいか?」教育的配慮が施されているか?」 というとちょっと疑問です。

この本の良い点を列挙してみる

それでは具体的にこの本の良い点を列挙してみましょう。

1つのシステムを作ること

既に述べたように、1つのシステムを最初から最後まで作成できる点がこの本の最も良い点です。

それとこの本では、必要性が出てきた時点でPHPの構文を解説するというスタイルをとっていますが、これが意外と重要です。

なぜなら通常のプログラミング本だと「何のためにこの構文を覚えるの?」「この構文はどこで使うの?」と思うことがよくありますが、この本ではそういったことにはならないからです。

読者が目的意識をもって勉強できるのが良いところです。

PHPの基礎や重要点に触れていること

この本ではアンケートシステムを作るのですが、きちんとPHPの基礎や重要点に触れています。
(もっとも触れているといっても、詳しく解説されているわけではありません。)

とりわけ私が評価しているのは第2章のパソコン設定(環境設定)のところと第4章のデータベースのところです。

パソコン設定は初心者には特に大変です。
かくいう私もパソコン設定には苦労しており、ここを丁寧に書いてくれるのは助かります。

またデータベースとの連携ができるようになると、制作できる物が増え、実力向上に役立ちます。

初心者向けの本であること

初心者向けの本であることも評価する点です。

1つのシステムを制作するような本は、ともすれば難しくなりがちです。
中級以上の読者であるならばある程度難しくてもかまいませんが、初心者に分かりやすく説明するのは大変です。

具体的な題材をもとに、プログラミング学習の入り口を魅力的にしている点が評価できます。

あまり良くない点

反対に良くない点も触れてみます。

解説が短い・到達点が高くない

この本はアンケートシステムを作ることがテーマなので、個々の構文の解説は詳しくはありません。
確かに分かりやすい解説ではありますが、説明があっさりしすぎていて、この本1冊では読者が抱くいろいろな疑問を解消できないでしょう。

それとこの本は1つのシステムを作る本ではありますが、この本で完成するシステムのレベルは高いものとは言えません。

そのためPHPの勉強を進めるのであれば、この本だけはなく別の本を読むなどして知識を深めていく必要があります。

バージョンの違いによる苦労があるかも?

この本の初版は2011年であり、出版年が古くなっています。

現在に至るまでにXAMPPがどんどん新しくなっており、新しいバージョンのXAMPPで本書を使うと、もしかしたらバージョンの違いから苦労するかもしれないです。

私もこの本を読了するまでに何度もつまずきました。
しかも新しいXAMPPを使っていたため、つまずいた原因が私の入力ミスか、それともXAMPPのバージョンの違いにあるのか分からなくて苦労しました(もちろん私の入力ミスなのでしょうが)。

私の場合、たとえばこの本の123頁にはデータベースに接続する5行のプログラムが書かれているのですが、この通りにコードを入力したつもりなのに、一向にデータベースに接続できませんでした(これはバージョンが違うせいなんでしょうか?)。

それで同じく谷藤さんが書かれている『気づけばプロ並み PHP 改訂版 ゼロから作れる人になる!』77頁に書いてあるコードを入力してデータベースに接続しました。

そのためどうしても先に進めない場合は、最終手段としてこの本に記載されたバージョンのXAMPPを使ったほうがうまくいくかもしれないです。

総合評価

評価は星5つ(満点)です。

★★★★★

この本の良くない点も触れましたが、個々の構文の解説が薄いのはこの本の性質上、仕方のないことです。
この本はとにかく1つのシステムを最後まで作りきることに重点を置いており、そのため個々の解説を厚くするとページ数が多くなることを危惧したのでしょう。

またXAMPPなどの環境設定は大変ですが、環境設定に苦労する点はどのプログラミング本も同じです。
むしろこの本は、他のプログラミングの本と比べてもより丁寧に環境設定を書いています。

そのためこの本の良くない点というのは、実はやむを得ないものであると私は判断しています。

それよりも初心者向けの本でありながら、1つのシステムを作りきる点は評価されるべきであり星5つとしています。

サービス業はリピーターに割引してはいけない

地方都市での仕事

行政書士の仕事もしています。

地方都市のお客さんなのですが、仕事の依頼があったので行ってきました。
依頼内容は「会社として建設業の許可が欲しい」というものでした。

この方とは個人で建設業をされていたときからの付き合いであり、個人事業主時代の建設業許可の取得もお手伝いしました。
その方が今回、会社を設立したので、会社としての建設業許可の取得をお手伝いすることになりました。

事前に資料をもらい、料金と作業期間を見積もりました。
リピーターさんなので料金は多少安くし、作業日数は2日と見積もりました。

高速道路を使って依頼者宅にうかがい、夜はホテルに宿泊しました。
2日とも事務所から通うこともできなくはなかったのですが、長距離の高速道路の往復は疲れるので泊まることにしました。

基本的なミスを犯す

ところが基本的なところでミスをしました。
依頼者宅で申請書類を作成し、2日目の午後に役所に持って行ったのですが、役所で予想外にダメ出しを食らい、多数の修正を求められました。

実はこのような場合に備えて、作成した書類にはすべて捨て印をもらっていました。
捨て印さえあれば代理人でもその場ですぐに修正をすることができるからです。

けれど私の場合、あまりにも修正箇所が多すぎて、受付時間までに申請書を修正できなかったのでした(涙)。
予定日数内に業務を終わらせることができなかったことは、プロとしてちょっと恥ずかしかったですね。

でもそれ以上に、「またここに来ないといけないのか~!」という思いが強かったです。
余計な経費がかかるので、それが痛かったです。

ミスを防ぐ方法

あとから振り返ると、ミスを防ぐ方法はありました。

今回のミスの一つは、2日目の午後に役所に書類を持って行ったことです。

できれば前日、遅くとも2日目の午前中に役所を訪問し、書類のチェックを受けていれば、たとえ多数の不備を指摘されてもその日のうちに修正できたでしょうね。

結局、この案件は、後日役所を再訪問し、業務を完了させました。
記載箇所を修正するだけなので、難しくもなんともないです。余計な労力・時間を費やしただけでした。

今回の根本的ミスとは?

今回の件の反省ですが、今回の件を振り返って思ったのは「リピーター割引をすべきではなかった」ということでした。
その割引がなければ、たとえ今回のようなミスがあったとしても十分利益が出たでしょう。

私の今までの値段設定を振り返ってみるに、どうも私はリピーターに値引きしすぎる傾向にあります。

確かにリピーターさんは新規のお客さんと比べると資料の作成がしやすい面はあります。
けれどそれにしても安くしすぎではないか? と思うのです。

私のリピーター料金を一言でいうと、「余力がなさすぎ」です。
ノーミスなら利益が出るのですが、ミスをしたり工期が延びたりすると利益が出ないですね。

でもリピーターのお客さんを目の前にするとついつい安くしてしまうんですよね。
人としては良い傾向なのかもしれませんが、こと事業となると情で安くしてはいけませんね。

ある程度の利益を確保しておかないと、事業自体を存続させることができませんから。

もちろん世の中にはリピーターに割引を適用している会社は多くあります。

代表的なのは健康食品などの物販でしょうか。
物販のような業種であればリピーターに割引を適用することは有効な戦略でしょう。

けれど私のようなサービス業で「リピーターだから」という理由だけで割引すると地獄を見ることになります。
だってリピーターも新規客も、作業量は同じでしょう? だったら同一料金をもらうことは何ら非難されることではありません。

この点をサービス業の人、特にフリーランスで仕事をされている方はしっかりと意識されたほうがいいですね。

早起きのためにバーチカル手帳を買った話

バーチカル手帳を買った理由

バーチカル手帳(縦軸型の手帳)を買いました。

もともと、ここ10年くらいは高橋書店の「見開き1週間レフト式」というタイプの手帳を使っていました。
高橋書店の手帳は書き味がいいし、開きやすく使いやすいです。

私の好みの「見開き1週間レフト式」は、左ページには縦に1週間のスケジュールが並んでおり、右ページは横罫線が入っているタイプです。
私は手帳には色々なことを書きたい派なので、このような余白の多い手帳を選んでいました。

それなのになぜ今回バーチカル手帳にタイプを変更したかというと、時間管理をしたかったためです。
特に睡眠時間の記録を取りたいと思いました。

ひとりで仕事をしていると、どうしても寝るのが遅くなり、その結果起きるのも遅くなります。

誰とも打ち合わせをする必要がないのであればこのような生活でも構わないのですが、こんな私でも打ち合わせはあります。
しかも時々は早朝に打ち合わせをすることもあり、そうなってくると普段と違って早起きしなければならず、それが大変でした。

過去に何度も早起きしようと努力はしたのですが、ことごとく失敗してきました。

唯一、上手くいきそうだったのはパソコンで睡眠時間をグラフ化するサービスを使っていたときです。
このときは少しずつ早寝早起きになってきたのですが、途中でこのサービスが中止になり、私の早起き計画も失敗しました。

その後、長期にわたり早起き計画はあきらめていたのですが、最近になり「手帳で時間管理すればいいのではないか?」ということにようやく思い至りました。

そこで睡眠時間を管理するためにバーチカル手帳を購入することにしたのです。

バーチカル手帳の条件

バーチカル手帳を購入するにあたり、私の望む条件は次の2つです。

  1. できるだけ24時間軸であること
  2. 土日についても平日と同様に時間軸のあること

できるだけ24時間軸であること

バーチカル手帳を買うにあたり、いろいろ手帳を探したのですが、意外と24時間軸というのは少ないんですね。
だいたい朝は6時7時くらい、夜は22時23時くらいまでのが多かったです。

けれど私的にはそれではダメなんです。
私の目的は睡眠時間を記録すること、特に寝る時間と起きる時間を記録することです。22時とか23時では記録が取れません。

それに私のやりたいことは単に就寝時間・起床時間を書き留めるだけではなくて、就寝時間から起床時間までを色をつけて塗りつぶすことです。そうすることで睡眠時間をグラフ化・可視化したいのです。

色をきちんと塗る観点から、できれば24時間軸が望ましいのです。

土日についても平日と同様に時間軸のあること

それと手帳の中には、平日は時間軸が書いてあるのに、土日は時間軸が書いていないものが結構あります。
平日は縦に1日分の記載スペースがあるのに、土日だけは2日で1日分のスペースなのです。

平日の仕事の記録を取りたいだけであればこのような手帳でもいいでしょう。

けれど私が取りたい記録は睡眠時間です。
睡眠時間に土日も平日もありません。そのため当然、土日も平日と同様の時間軸がかかれているものが必須です。

私の選んだ手帳

上記の条件をもとにロフトに行き、手帳を探してきました。

理想に一番近かったのは、ユナイテッドビーズの手帳ですね。
24時間軸であり、土日もしっかり時間軸が記載されています。

ほとんどこれに決めかけたのですが、「バーチカルページにフリースペースが欲しいかも?」と思ったのと、なによりユナイテッドビーズは倒産したので、来年以降この手帳を使うことはできません。

来年必ず手帳を変えないといけないというのであれば、来年と言わず、今のうちから自分に合う手帳を探しておこうと思い、ユナイテッドビーズは見送りました。

倒産がなければユナイテッドビーズを使ったんですけどね。

その後、いろいろ探したのですが、完全に理想に一致する手帳は見つかりませんでした。

そこで妥協し、最終的にNOLTYのバーチカル手帳(商品番号2277番)に決めました。

この手帳は時間軸が朝7時から夜24時までの17時間しか記載されていませんが、使い方によっては自分で時間軸を増やし、7時から29時までの22時間軸として使うことが可能です。
もちろん土日も時間軸が記載されています。

この手帳を使ってどの程度早起きができるのかは分かりませんが、できるだけ頑張ってみようと思います。

モバイルファーストの大切さを痛感した話

スマホサイトを作ってみた

パソコン用ホームページ制作の練習をしてきたのですが、そろそろスマホ・携帯用のサイトも作ってみたくなりました。

ホームページを作るとき、最近はモバイルファーストといってスマホ・携帯サイトを作ったあとでパソコン用ホームページを作るのが主流になりつつあります。

ですが私はいままでパソコン用ホームページをメインで作成してきたため、今回も最初にパソコンサイトを作り、それをスマホ・携帯サイトに作り替えるという手順を取ることにしました(私はこれをパソコンファーストと呼んでいます)。

パソコンファーストでホームページを作ってみた結果ですが、私は「二度とパソコンファーストではホームページは作らない」と心に強く刻みました。

なぜ私がそう思うようになったのか、以下にその理由を書いてみたいと思います。

パソコンファーストで苦労した点

デザインに制約がある

パソコンファーストで苦労した点は大きく2つあります。

1つはデザインに関する点です。

ホームページ制作というのは、例えるなら倉庫に荷物を詰め込む作業のようなものです。

モバイルファーストは小さな倉庫にある荷物を大きな倉庫に詰め替える作業、パソコンファーストは大きな倉庫にある荷物を小さな倉庫に詰め替える作業といえます。

小さな倉庫から大きな倉庫に詰め替える場合、荷物の詰め替えは比較的容易です。
ところが大きな倉庫にある荷物を小さな倉庫に詰め替えようとすると、いろいろと工夫しないと倉庫に入りきりません。

パソコンファーストでホームページを作ると、それを小さくするために行を折り返したり、構成物を非表示にしたりと、様々な工夫をしなければならないのです。

もちろんモバイルファーストで作る場合も小さな画面は手間はかかるのですが、パソコンファーストのようにいったん大きな画面で作り、それを小さくするほうがはるかに手間がかかります。

CSSの構成に悩む

モバイルファーストのCSS構成

もう1つ悩んだのはCSSの記述構成です。

私はメディアクエリでホームページを作っているのですが、モバイルファーストの場合は、最初に1番小さな画面のデザインを記述し、その下に順次、大きな画面のデザインを記述していくことになります。

例えば小画面(400px)、中画面(800px)、大画面(1200px)のサイトを作る場合、モバイルファーストであれば

  1. 小画面(400px)
  2. 中画面(800px)
  3. 大画面(1200px)

の順に記述すればいいですよね。
これはCSSの記述として統制がとれてきれいです。

仮にこのサイトに大々画面(1600px)を追加する場合も、

  1. 小画面(400px)
  2. 中画面(800px)
  3. 大画面(1200px)
  4. 大々画面(1600px)

の順に記述すればいいだけですね。

パソコンファーストのCSS構成

ではパソコンファーストでホームページを作る場合、どの順で記述するのがよいのでしょうか?

パソコンファーストだから最初に大画面(1200px)を記述しますよね。すると構成は

  1. 大画面(1200px)
  2. 中画面(800px)
  3. 小画面(400px)

となるのでしょうか?

ではこのサイトに大々画面(1600px)を追加したい場合はどうすればいいのでしょうか?

  1. 大画面(1200px)
  2. 中画面(800px)
  3. 小画面(400px)
  4. 大々画面(1600px)

と記述するのでしょうか? それとも

  1. 大々画面(6500px)
  2. 大画面(1200px)
  3. 中画面(800px)
  4. 小画面(400px)

とするのでしょうか?

CSSの記述ルールを決めておかないと、CSSがどんどん見づらくなりますね。

またきちんとCSSの記述場所を考えないと、記述場所によっては優先順位(下に書くほど優先適用される)のためにセレクタが複雑になりすぎるという問題も生じます。

つまり、きれいなCSSをつくるという観点からもモバイルファーストでホームページを作るほうが理にかなっているのです。

今回、パソコンファーストでホームページを作ったことにより苦労はしましたが、それによりモバイルファーストの意義がよく理解できたことが大きな収穫でした。

私の好きな推理・脱出ゲーム系アプリ

私の好きなスマホゲーム

ときどきスマホでゲームをしています。
私の好きなスマホゲームを一覧にしてみました。

好きなスマホゲーム

デベロッパ ゲームタイトル ジャンル
Child-Dream 人形の傷跡 アドベンチャー
Child-Dream 緋染めの雪 アドベンチャー
Cybergate technology Ltd. R ファミリー
Jin Yue 赤い女 パズル
Jin Yue 最恐脱出ゲーム:呪巣 -起ノ章- アドベンチャー
Nanako Yaguchi ボールゲーム-BLACK HOLEパズル パズル
PONS にゃんこ大戦争 ストラテジー
Sakabou Inc. デラクエスト – ドット絵レトロRPG ロールプレイング
SEEC Inc. アリスの精神裁判 アドベンチャー
SEEC Inc. 四ツ目神 パズル
SYUPRO-DX Inc. 彼女は最後にそう言った アドベンチャー
SYUPRO-DX Inc. 奴は四天王の中で最も金持ち ロールプレイング
Visualshower Corp. ホワイトアイランド アドベンチャー
zzyzx 恐怖!廃病院からの脱出:無影灯 アドベンチャー

こうやってみるとジャンルとしてはアドベンチャーゲームが多いですね。
ただ、私としてはこれらのゲームを推理・脱出パズル系のゲームととらえているんですけどね。

好きなゲームの基準

次になぜこれらのゲームが好きなのか、私なりに好きなゲームの基準を分析してみました。
私がゲームを選ぶときの基準は4つあります。

基準1・パズルゲームであること

先ほども書いたように、好きなゲームは第1にパズルゲームであることです。
ただし、純粋なパズルゲームはだんだん飽きてくるので、どちらかというとストーリー性のあるパズルのほうが好きです。

一覧に掲げたゲームもストーリー性のあるものが多いですね。

純粋なパズルゲームのなかでお勧めするとすれば、Nanako Yaguchiさんの『ボールゲーム-BLACK HOLEパズル』とCybergate technology Ltd.さんの『R』が良いです。

基準2・論理が単調でないこと、論理が破たんしていないこと

パズルゲームが好きなので、当然論理的なゲームが好きです。

もっとも厳密な論理でなくても、作者なりの論理を感じることができればOKです。
ストーリー性のあるゲームも、「ストーリー」という枠の中で論理が一貫しているのであれば、私的には十分論理ゲームたりうるのです。

反対に論理が単調なものや、論理が破たんしているゲームは好きではないです。

論理が単調とは?

論理が単調というのは、たとえばタップしてアイテムを集めるだけとか、あるいは時間さえかければクリアできるゲームです。

一部のゲームにみられるように、ボスを倒したら次のより強いボスが登場するというように、次々と強いボスが登場するだけのゲームは、やること(攻略方法)が同じなのであれば論理が単調といえるのでつまらないです。

論理が破たんとは?

論理が破たんしているゲームというのは、単純ななぞなぞや犯人当てゲームの類です。
これらのゲームの多くは、作者が提示した解答の他にも、いろいろな解答・解釈が成り立つので好きになれないです。

基準3・簡単にサクッとできるゲームであること

ゲームは好きなのですが、そこまでゲームをやりこむつもりはありません。
そのため設定が複雑なゲームや、クリアに時間がかかるゲーム、あるいは課金しないと進めないゲームはやりません。

この観点からロールプレイングゲームはあまりやらないのですが、Sakabou Inc.さんの『デラクエスト – ドット絵レトロRPG』やSYUPRO-DX Inc.さんの『奴は四天王の中で最も金持ち』は手軽にできるので好きです。

基準4・やりたいときにいつでもできること

無料ゲームの一部には、(課金しない限り)1日にできるゲーム時間やゲーム展開が制限されているものがあります。

無料ゲームは広告で収益を上げているので、1日にできるゲーム時間・展開を制限することで、長期間にわたってユーザーに広告を見せる戦略ですね。

その意図はよくわかりますし、私も無料で遊ばせてもらっている以上、その点はあまり強く非難できません。
けれど好みではないです。

私はやりたいときにやれるゲームが好きなのです。

たとえばVisualshower Corp.さんの『ホワイトアイランド』は1つの章から次の章へ行く間は長期間待たされるのですが、ゲーム自体はやり込めるので好きです。

おすすめのゲームTOP3

以上をふまえて、私の好きなゲームTOP3を挙げてみます。

第3位 Child-Dream 『人形の傷跡』

このゲームはスマホアプリで遊び始めた初期に出会いました。
無料ゲームなのにレベルの高さに驚かされました。

Child-Dreamさんは本作に限らず、どれもシナリオが良くできています。

第2位 SEEC Inc. 『アリスの精神裁判』

SEEC Inc.さんの長編作品です。
SEEC Inc.さんの作品では、本作と次作の『四ツ目神』が最高傑作だと思います。

初期の短編作品も面白かったのですが、いまはほとんど遊べなくなったのが残念です。

第1位 SYUPRO-DX Inc.『彼女は最後にそう言った』

やはりどれか1つを挙げるとするとこれでしょう。

彼女の死の真相を探るゲームなのですが、ストーリーのすばらしさはもちろん、ドット絵で表現されたキャラクターからは喜怒哀楽が感じられ、愛くるしいです。美しい音楽が物語によく合っています。

また本編にからめたミニゲームや村人との会話にまで労力が注がれており、作者がこのゲームを楽しんで作った様子が伝わってきます。


以上、私の好きな推理・脱出ゲーム系アプリでした。
ここに挙げたゲームは、推理・脱出ゲームが好きなかたであればどれも楽しめると思います。興味のある方はぜひやってみてください。

『CSSグリッドで作る HTML5&CSS3レッスンブック』と『HTML5&CSS3ステップアップブック』の感想

今回読んだのは『CSSグリッドで作る HTML5&CSS3レッスンブック』『HTML5&CSS3ステップアップブック』(共にエビスコム著・ソシム)の2冊です。

エビスコムさんの本は何作も読んでいますが、エビスコムさんの本は、著者独自の考えを押し付けるわけではなく、総じて一般的な手法・普遍的な手法でホームページを作成しており、初心者でも安心して読めるところが良いですね。

実際にホームページを作りながらの演習なので、具体的なホームページの制作方法が分かります。
また重要な点は紙面を割き、かなりきちんした形で説明してくれるので助かります。

以前からフレキシブルボックスレイアウト(つまりdisplayの値をflexに設定する手法)に興味があったので『HTML5&CSS3ステップアップブック』を買おうかどうか迷っていたのですが、2018年末に『CSSグリッドで作る HTML5&CSS3レッスンブック』が出版されることを知り、この際なので2冊とも読むことにしました。

『CSSグリッドで作る HTML5&CSS3レッスンブック』の特徴

CSSグリッド初心者向けの本です。
この本の特徴は2つあります。

  • CSSグリッドを使うことと
  • モバイルファーストであること

です。

CSSグリッドについて

CSSグリッドというのはホームページを格子状に分割し、格子にパーツを当てはめてホームページを作っていく手法のことです。

最初に格子にパーツを当てはめる作業をするため、はじめからホームページ全体の構成を考えておく必要があります。
それとCSSグリッドを使うことで、レスポンシブホームページが作りやすくなっています。

モバイルファーストについて

以前はパソコンサイトを作ってからスマホ(携帯)サイトを作るのが主流でしたが、現在はモバイルファースト、つまりスマホサイトを作ってからパソコンサイトを作る方向になりつつあります。

この本ではモバイルファーストでホームページを制作しており、モバイルファーストの手法を知りたいという方には参考になります。

『HTML5&CSS3ステップアップブック』の特徴

既にCSSグリッドの基礎は知っているという人は、最初からステップアップブックに取り組まれてもいいと思います。

ステップアップブックはレッスンブックと比べ、より多くのプロパティが登場し、細かなデザインが作れるようになります。
flexについての説明もこの本に書かれています。

レッスンブックは基礎が学べるいい本なのですが、実際に仕事でホームページを作るとなると、ステップアップブックレベルの知識が必要になるでしょう。

総合評価

各本とも、評価は星4つとします。

★★★★☆

別に星5つでもよかったのですが、私自身が他にCSSグリッドの本を読んだことがないので、最高評価をつけるのにためらいがありました。
著者には申し訳ないのですが、M-1などのコンテストで最初の演者の点数が低く抑えられてしまうのと同じ理屈ですね。