ウェブ制作を2019年から勉強する人に教えたいこと


年に二、三回、初学者向けのHTML・CSS講座の講師をしています。対象は社会人ですから、生徒のほとんどは新人研修の一環で派遣されてきたか、企業のウェブ担をすることになった人たちです。

短い日程では、最低限のウェブサイトを作成するところまでを教えるまでが精一杯ですから、2019年の時点で学んでほしいこと、知ってほしいことを資料にまとめて終了後に渡しました。
許可を頂いたので、その資料の内容を記事として公開します。

理解しやすい表現を優先しているので、もやもやを感じる方もいるかもしれません。その場合はぜひ、補足記事などを書いて教えてくださるとありがたいです。

わかりやすいCSS設計



divでモジュール化しよう

ウェブサイトはページ内で、ナビゲーション、リスト、記事、写真ギャラリーなどの、多くの部品に分かれています。

HTML・CSSコーディングでは、これらの部品を「モジュール」と定義して、部品ごとにdivで囲んでクラス名をつける手法が主流となっています。
この手法で制作すると、二回目以降のサイト制作で部品を切り離して使いまわしたり、修正や間違いがあったときに編集しやすくなります。

<div class="sample">
    <h2 class="sample-title">サンプルモジュールのタイトルです</h2>
    <div class="sample-contents">
        <p>サンプルモジュールの本文です</p>
        <p>サンプルモジュールの本文です</p>
    </div><!-- /.sample-contents -->
    <p class="sample-link"><a href="more.html">詳しくはこちら</a></p>
</div><!-- /.sample -->

classの付け方

このとき、ほぼすべてのモジュールは「id」ではなく「class」で管理するのが望ましいとされています。idで定義したCSSは優先度が高くなり、編集や上書きがしにくくなるためです。
また「モジュール名+ハイフン+パーツ名」と、ハイフンつなぎで記述するのが一般的です。

※大規模サイトでは、アンダーバーを含む高度な記述が採用されることもあります(BEMと呼ばれています)。

以下の例の通り、階層もできるだけ浅くして定義するのが、最近の主流となっています。

.sample {
  ...
}

.sample-title {
  ...
}

.sample-contents {
  ...
}

.sample-contents p {
  ...
}

.sample-link {
  ...
}

.sample-link a {
  ...
}

見出しは要素名で定義しない

「.sample-title」クラスに注目してください。「.sample h2」と書いてもよいはずですが、クラスを作成しています。
これはマークアップの都合や他のサイトへの使い回しで、見出しがh2要素ではなくなったときに、修正が発生しないようにしているのです。

見出しレベルはコンテンツによって変動するので、見出しは要素名で定義しない方が柔軟な設計ができます。

モバイル対応



なぜモバイルに対応する必要があるのか?

スマートフォンが登場した2008年以降、スマートフォンでウェブサイトへ訪問する割合は非常に高くなっています。
幅が狭いモバイル端末での読みやすさに配慮するのはもちろんのことですが、検索エンジン最大手のGoogleが、「モバイル端末に対応していないと判断したウェブサイトの検索結果での評価を下げる※」ことを公表しているため、2019年現在では、ほぼすべてのウェブサイトのモバイル対応が必須となっています。

※デスクトップ専用サイトとして判定するため、モバイル環境においての順位判定に影響する、という意味です。モバイル対応さえしていればコンテンツがめちゃくちゃでも良い、という意味ではありません。

モバイル対応ではないと判定される主な基準

  • モバイル端末の画面幅でコンテンツが画面からはみ出す
  • リンクボタンのクリックできる範囲が小さい
  • リンクボタン同士が近すぎる
  • 表示速度が遅い

最低限行いたいこと

「ウィンドウの幅を縮めたときに、下にスクロールバーが出ないよう制作する」のが最低限の対応となります。
以下の工夫で、コーディングの知識が浅くてもモバイル対応は可能です。

  • widthではなく、max-widthで幅を指定する
  • 画像に「max-width: 100%;」「height: auto;」を指定する(画面サイズに合わせて伸縮するようになります)
  • table等の、幅の扱いが難しい要素の使用を避ける

レスポンシブウェブデザインとは

表示している端末に応じてレイアウトを変更させるウェブデザインの手法は、「レスポンシブウェブデザイン(RWD)」と呼ばれています。 画面サイズを条件として適用するCSSを変更する「メディアクエリ」という手法を活用します。

メディアクエリの使い方

これは、画面サイズが768ピクセル(タブレット縦持ち)以上のときに、見出しのサイズを24ピクセル、かつ中央寄せにする例です。
スマートフォンでは基本値の18ピクセルとなります。

※一般にはfont-sizeの単位はem・remを使用することが多いですが、初学者には概念の理解が難しいので、サンプルはピクセルとしています

h2 {
  font-size: 18px;
}
        
@media (min-width: 768px) {
  h2 {
    font-size: 24px;
    text-align: center;
  }
}

モバイルファースト

上の例の通り、スマートフォンのCSSを定義してから、タブレットのとき、デスクトップのとき、と上書きしていく方が制作がしやすいです。また、シンプルな画面から作りはじめることで、無駄のない設計ができます。
この考え方は「モバイルファースト」と呼ばれています。

古いデザインのサイトが減っている理由

15年ほど前まで、ページ全体のレイアウトはtable要素(巨大な表)や、フレームセットと呼ばれる、画面を分割する技術で作られていました。古いブラウザがCSSを正しく解釈できなかったため、安定して表示できるこれらの技術は広く普及していました。

table要素で作ったサイトは幅が固定されているので、小さな画面で適切に表示できません。このためここ数年はリニューアルが盛んに行われ、それに伴って、古いデザインのサイトは消えつつあります。

俳優の阿部寛さんのウェブサイトは、当時の技術で作られたHTMLを現在も更新し続けており、「貴重な技術遺産」と呼ばれています。興味がある人はソースコードをのぞいてみてください。

http://abehiroshi.la.coocan.jp/

エディタ


サイト画面:Sublime Text

Sublime Text公式サイト


ウェブ制作向けのエディタ

講座では、今後の講座との関係で「統合開発環境」と呼ばれるアプリケーションを使用することがあります。ですが、ウェブ制作のみを行っている技術者は、もっとシンプルな「テキストエディタ」と呼ばれるアプリケーションを使用しています。

テキストエディタと統合開発環境の違い

動作が軽い

機能が少ないため起動が早く、動作が軽いです。

コード編集を補助する機能

コードを早く編集することに特化したアプリケーションなので、同じ単語を選択して一度に編集したり、画面を文字単位ではなく長方形に選択したりできます。

テンプレート機能がない

どのプログラム言語のファイルを作成するのかを選ぶと、自動でひな形を作成する機能はありません。ある程度コーディングに慣れている必要があります。

内部サーバーを作る機能がない

プログラムをその場で実行するための、内部サーバーを立ち上げる機能がありません。

※拡張機能を追加するとできるようになるエディタもあります

代表的なエディタ

ウェブ制作者が使用している代表的なエディタです。初心者にとっては、各エディタの違いはあまりありません。どれも無償で提供されているので、好みで選んでください。

Sublime Text

https://www.sublimetext.com/

コーディング向けエディタの先駆けとなったアプリです。便利な機能を早い段階から備え、愛用者の間では「恋するエディタ」とまで呼ばれています。有志が作成した拡張機能も多いです。

Atom

https://atom.io/

コード共有サービス「GitHub」が提供するエディタです。「ハックできるエディタ」と呼ばれ、CSSやJavaScriptなどの、ウェブ制作者が知っている技術でカスタマイズできます。
外観を細かく変更でき、視覚、色覚に障害がある人にも向いています。

Brackets

http://brackets.io/

画像加工ソフト「PhotoShop」を販売しているAdobeが提供するエディタです。ファイルを更新するとChromeが自動的に更新されるライブプレビュー、カラーコードを書くとその場で色を確認できるなど、デザインを同時に扱う人に優しい機能があります。 日本語のガイドブックは札幌のエンジニアが書いています。Kindleで無料で読むことができます。

https://www.amazon.co.jp/dp/B019SPFHX2/ref=cm_sw_r_tw_dp_U_x_Aj1SCb3QGFG0M

ウェブフォント


サイト画面:Google Fonts

Google Fonts公式サイト


CSSの「フォント」の授業で、font-familyで使用できるのは、OSに入っているフォントだけと説明しました。
ですが近年では、サーバー内に設置したフォントファイルを読み込んで利用できる「ウェブフォント」という技術が開発されています。
自分でフォントファイルをサーバーに設置する方法もありますが、ここでは簡単に利用できるフォントサービスを通した使い方を紹介します。

ウェブフォントの利点

  • OSを問わず同じフォントを表示することができる
  • 文章をコピーできる
  • 画面を拡大してもぼやけない
  • CSSで色や大きさを調整できる
  • 簡単に修正できる(画像ロゴだとHTMLでは修正できません)

代表的なフォントサービス

Google Fonts

https://fonts.google.com/

やや表示が遅いですが、無料で使用できます。学習におすすめです。

FONTPLUS

https://webfont.fontplus.jp/

ソフトバンクが提供しています。多彩なフォント会社の文字を提供しており、ブラウザ上での試し書きもできます。

Adobe Fonts

https://fonts.adobe.com/?locale=ja-JP

Adobeが提供しています。PhotoShopなどの同社のパッケージを契約していると同時に使用できます。

TypeSquare

http://typesquare.com/special/

モリサワが提供しています。人気が高いモリサワのフォントをほぼ全て利用できます。

ウェブフォントの使い方

head要素にタグを貼り付ける

サービス側が提供しているコード(scriptタグ)を、head要素内に貼り付けます。全ページに貼り付けてください。
また、サービスに記載されている、使用することにしたフォントの正確な名前をコピーしておいてください。

CSSにフォント名を書く

フォント名を、font-familyプロパティでCSSに記述します。

以下の例では、h1要素とh2要素が「筑紫Aオールド明朝」になります。万一フォントが読み込めなかったときのために、OS用のフォントも記述しておきましょう。

h1, h2 {
  font-family: "FOT-筑紫Aオールド明朝 Pr6N B", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

学習のコツ



技術書選び

HTMLとCSSの技術書は、初学者のうちは一冊は読んでおくことをお勧めします。
Amazonで「HTML CSS」と検索したときに、三年以内に出版されて評価が高い本は、どれも間違いはありません。

※ウェブ制作者は嘘のレビューを書きません。正しい情報を提供することの大切さを仕事を通して知っているからです。

レビューには「まったくの初心者向け」か「ある程度HTMLとCSSが書ける人向け」かが書かれていますから、よく読んで自分に合いそうな本を選びましょう。

コピペと写経

まず、便利そうなHTMLやCSSのサンプルを見つけたら、どんどん自分のサイトにコピー・ペーストしましょう。効果や役割を理解できたら、属性値などを手で書き直してみてください。
正しいコードを書いていくうちに、早くて正しいコーディングが身についていきます。

また、よほど急ぐ仕事でない限りは、次に作るサイトに使い回すことを想定してコードを書きましょう。

SNSの活用

手軽な情報収集には、やはりTwitterがおすすめです。「ウェブデザイナー」「コーダー」「フロントエンドエンジニア」などをプロフィールに記載している、フォロワーが数百人以上の人たちをフォローしてみましょう。

皆さん普段は雑談が多いですが、たまに有名な技術者のブログ記事や、勉強会の様子をツイートすることがあります。それらをたどって、ブログの著者や、勉強会の主催者をフォローして、さらに正しい情報を集めていきましょう。

情報を得るだけではなく、自分自身も学習したこと、読んだ記事をメモ代わりにどんどんアウトプットしていくようにしましょう。

ウェブ系の勉強会へ行こう

「初心者向け」と書いてある勉強会や、講師がたくさん出演するセミナーイベントを見つけたら、参加してみましょう。

もしかすると内容が難しすぎるかもしれません。それでも、新しい目標を得たり、高い技術を持つ人との出会いにつながるかもしれません。

参加する際は、以下に注意しましょう。

メモを取る

紙でもノートパソコンでもいいので書き残しましょう。

Twitterのハッシュタグをチェックする

スマホがあれば。アカウントがなくても見られます。参加者や他の講師が「副音声」として、便利な補足情報や自分の仕事での使い方をツイートしていることがあります。

スーツではなく平服で参加する

スーツの人はちょっと話しかけづらいのです。懇親会のときも移動しづらいです。

名刺を持参する

どんな仕事をしているかの情報交換を忘れずに!

地方勉強会

東京から遠くても、活発な勉強会がある地域は多いです。地元の大きな都市で勉強会がないか調べてみてください。

札幌では「SaCSS(サックス)」というウェブ系の勉強会が、長年に渡って開催されています。先日、10周年を迎えました。
札幌で最前線で活躍するウェブ制作者に気軽に会うことができるので、北海道の方はウェブ制作に慣れてきたらぜひ参加してみてください。

https://sacss.net/

まとめ

資料の内容は以上です。

ウェブ制作では「キーワード」を知るだけで、その言葉で検索して解決できることは多いです。この資料で太字になっている箇所がそのキーワードです。検索するときは、必ず検索オプションで「一年以内」でも調べてください。新しい情報が出ている可能性もあります。

jQueryは!?と思った人が多いかもしれません。jQueryについては以下の理由で割愛しました。

  • 会社勤務であれば、当面先輩が担当することになる
  • JavaScriptのクエリセレクタとの境界が曖昧になってきている
  • HTMLとCSSを学習すると自然にたどり着く

私が独学でウェブ制作を学習した2003年頃は、正しい技術書も少なく、SNSもブログも存在しておらず、ずいぶん苦労した記憶があります。 この記事が、なにから手を付けてよいかわからなくなった初学者の助けになれば幸いです。


投稿者名 うぇびん 投稿日時 2019年04月15日 | Permalink

来年の確定申告で楽をするために知っておきたいコツ

電卓は使わないです


本年度分の確定申告も、今日、3月15日で締切となります。

開業してから11回、確定申告を経験してきました。経理の実務経験があるため、確定申告は毎年自分でやっています。
年によっては最終日の午後になったり、間に合わずに税理士さんに依頼したこともありますが、ここ数年は会計ソフトがとても使いやすくなっただけでなく「確定申告を楽にするためのコツ」のようなものを会得しており、あまり焦らなくなりました。

フリーランスになったばかりの人や、何年やっても苦痛だと思っている人のために、そのコツをご紹介します。
なお、あくまで個人事業主向けの知見です。法人には、かなり雑なものであることをお断りしておきます。

毎月経費を記帳しなくていい

世の中には、自己管理能力がひじょうに高い人たちがいます。そういう人たちは決まって「経費は毎月記帳している」「毎月やっておけばあとで慌てないですむのに」と言ってきます。
これは正論ですが間違いです。

順調に進むのは、自己管理能力がひじょうに高い人たちが、確実に記帳しているからです。むしろ、スキルが低い人が中途半端に帳簿をつけてしまうと、何ヶ月も経ってから金額のズレが出て、原因がどこかを探すのに手間取ってしまうことになります。
毎月お金の流れを確実に把握していないと震えるとかではないなら、年が明けてから一年分の取引を経費科目ごとに一気に入力してしまった方が早いですし、間違いを発見しやすいです。

同期・自動取り込みが使える銀行にする

私自身の経験では、やよいの青色申告オンラインが「スマート取引取込」に対応した二年前から、確定申告にかかる日数が大幅に減りました。freeeでは「同期」と呼ばれている機能です。

事業用の口座は当然持っていると思いますが、自動取り込みに対応している銀行に変更することを強くお勧めしたいです。そのくらい楽になります。手数料の関係で取引先に難色を示されるから…などの事情がある場合は、入金専用口座にして、細かい出金を別の銀行にする手もあります。

経費はスプレッドシートで作ってインポートする

freeeとやよいの青色申告オンラインは、弥生会計形式のCSVインポートに対応しています。それ以外のサービスは確認していません。すみません。

その他の会計ソフトから仕訳データを移行する(弥生会計形式を用いた方法) – freee ヘルプセンター

[弥生データのインポート]メニュー

消耗品費、水道光熱費、接待交際費などの現金の経費は件数が多く、会計ソフトに一件ずつ入力していくとかなりの手数がかかりますが、Excelなどのスプレッドシートで一気に金額と日付を打ち込んでいき、弥生会計形式に整えてインポートすると、大量の仕訳をスムーズに取り込むことができます。
片手入力ができる、消費税の計算に関数を使用できる、同じ金額の仕訳をコピーで増殖できるなど、スプレッドシートの機能を活かしたいところです。

私が実際に毎年使っているひな形を置いておきます。もちろんGoogleスプレッドシートも使用できますが、文字コードをShift_JISに変換してからインポートしてください。

やよいの青色申告オンライン対応CSVインポートひな形

レシートの写真を撮ると…

ここまで読むと気付くかと思いますが、freeeのアプリなどが搭載している「レシートの写真を撮ると仕訳が記録できる!」という機能は、年度末にまとめて仕訳するフローの場合は、全然便利にも早くもなりません。
あれは冒頭で触れた、まめに帳簿をつけられる「自己管理能力がひじょうに高い人たち」のためのものです。間違っても一般の人は手を出さないようにしましょう。

交通系ICカードは同じ金額をチャージする

フリーランスの経理取引で一番面倒なものが、旅費交通費です。ほとんどの人は、Suicaなどの交通系ICカードを持っていると思います。
これにチャージするときに、毎回同額でチャージするようにします。金額を揃えておくと仕訳が異常に楽になります。クレジットカードでの自動チャージにすることが考えられますが、クレジットカード払いは仕訳が複雑になったり、支払いが年またぎになったりするので、会計ソフトに自動で取り込めないカードの場合は現金で統一したほうが良いでしょう。

簡便法を活用する

先述のSuicaですが、チャージの際は一旦「貯蔵品」や「仮払金」として仕訳し、実際の交通費を都度「旅費交通費」として引いていくのが正しいと言われます。

貯蔵品3000現金3000
旅費交通費500貯蔵品500

ですが、一ヶ月分、一年分の交通費を残額から逆算してまとめて計上してしまう「簡便法」を使用することも認められています。

Suica,PASMO,ICOCAなど交通ICカードの仕訳・会計処理

旅費交通費45500貯蔵品45500

↑↑一年分のチャージからICカード残額を引いた金額

この計算方法は、現金や普通預金の残額から12月31日付で年間の生活費にあてた分(事業主貸)を計上するのにも使えます。ひとつひとつ交通費を入力していくととんでもない手数がかかりますし、間違いが多くなります。簡便法が使えそうな仕訳は積極的に採用しましょう。

取引先ごとに補助科目を作る

交通費の次に面倒なのが、売掛金です。取引先によって源泉が含まれたり入金から手数料が引かれていたりするので、売掛が回収されているかの把握に手数がかかります(本当は引いてほしくないのですが、自社以外への振込に750円もぼったくる○洋銀行がうんこなので仕方ないですね)。

取引先ごとに補助科目を作るのが確実です。仕訳を取引先でソートすることで回収状況を確認できます。一度きりのお取引先はいちいち作っていられないので「その他」に入れます。
どうしても金額が合わない場合は、「売掛帳」を見るのも良いと思います。

売上を整理する

オンラインショップの売上や、ランサーズなどのクラウドワークによる少額収入が多いと、会計処理が複雑になりがちです。
オンラインショップの場合は商品の金額を揃えることである程度回避できますが、クラウドワークの場合はそうもいきません。

これは私の実際の経験からの話になりますが、少額かつ一度きりの取引が大量にある業態より、高額かつ安定した取引が定期的に望める業態に変えるよう努めた方が、経理的にも精神的にも良いです。
怪しい取引先が多いと、売掛金の回収不能=貸し倒れのリスクが高まります。金銭的に損をするばかりか、「貸倒引当金」という経理の知識がない人には最難関の仕訳をすることになります。

まとめ

私が確定申告の負荷軽減のためにやっていることは、このようなところです。自動取り込みとCSVインポートは強くお勧めします。これらの機能のために毎年10,000円ちょっとの会費を払っていると言ってもいいくらいです。

freeeかやよいか、というのは完全に好みの問題です。ただ相性はあるようで、私はfreeeのUIは合いませんでした。なので両方試してみるのがいいだろうと思います。

来年からはe-Taxで申告すると所得の控除額が10万円増えます。そうなると導入したくもなりますがが、場合によってはせっかく楽になった分が無駄になりそうです…

e-Taxで確定申告するのに4日かかった件|Takehito Tanabe|note


投稿者名 うぇびん 投稿日時 2019年03月15日 | Permalink

「夢中になれるものがない」という悩みについて考える

私は元々、個人サイトを運営しているうちに、ウェブ制作自体が趣味になったことがきっかけで、この世界に入りました。
趣味が高じて、という流れです。
その頃は、このような悩みが出てくるとは思いませんでした。

仕事にあまり関係ない話ですし、つまりは「いいわけ」なのですが、フリーランサーが陥りがちな病なので、考えたことを書いておきます。

なんとなく楽しくない

当然のことですが、長年当たり前のように仕事をするうちに、ウェブ制作やCMSはあくまで仕事であり、昔のように「むちゃくちゃ楽しい」とは思えなくなりました。
それでも他の趣味、ゲームと編み物があったのですが、それらも楽しいと感じられなくなってしまいました。

ときどき、ハマってはいるのですが、どうも心の奥底に苦痛を感じているのです。
この「苦痛」がなにか原因があるのか、メンタルの不調にありがちな「感情の歪み」なのか、ずっと気になっています。

完成できない



編み物は長年の趣味です。二十代の頃は講師を目指していたのですが、自分には人に教えるメンタリティがない事に気づいたので、趣味としてやっています。

ところが、ここ数年は作品を完成できません。例えばセーターは後ろ身頃・前身頃・袖が必要ですが、前身頃の後半に来たところで、ぶっつりと楽しさがなくなって苦痛しか残らなくなるのです。そうなると日が空くし、編み図も忘れてしまうのでそのまま未完成になります。

もしかすると自分は、面倒くさくなっているのではなくて、「完成させたくない」のではないだろうか…とも考えてしまいます。完成することで終わってしまうのが嫌なのか、「作品」が「衣服」になってしまうのが嫌なのか、わかりません。

また、上の写真のもそうなのですが、難易度が高い模様をつい選んでしまいます。割り切って極太糸で無地やボーダーにすればいいのに。

納得がいかない

SNSでこの悩みをこぼしたところ、友人が言いました。

「ああ、そうか。うぇびんさんの趣味は、過程だけじゃなくて、ものを作って出来上がることを楽しむアウトプットの趣味なのですね。だから出来栄えとか成果物のレベルも趣味の喜びに大きく影響するのですね」

友人はインプットの趣味が多いといいます。読書やカフェ巡りのような、すでにあるコンテンツを体験するたぐいのものです。一方、私の趣味は「一定の成果が出ていること」が具現して、初めて楽しさを感じるのです。



ゲームが趣味と書きましたが、「サンドボックス」「コンストラクション」と呼ばれるジャンルがプレイの大半を占めます。何かを自由に作ることが大好きなのです。冒険前の準備の動線を意識しつつ、デザイン性が高い「自宅」を建築するときが一番わくわくします。

特に「Minecraft」は7年プレイしていましたが、一年ほど前に過去最高に気に入った拠点を作ってしまい、それ以降納得がいかなくてはやめる、ということを繰り返してしまっています。

先日、違う手芸をやってみようと樹脂粘土を買ったのですが、小さな作品を作っただけで「思ってたんと違う」と感じてしまいました。どうも理想が高すぎる悪い思考パターンに陥っている気がします。手を動かしているだけましですが。

登る前に頂上を見てしまう

ソーシャルメディアのおかげで、同じ趣味を持つ人の作品を楽しんだり、情報を交換したりできるようになりました。ですが、それと引き換えに「何もしていないうちに、極端にレベルが高い到達点を見てしまう」という問題も出てくるようになりました。

例えば登山で、富士山に登る前に「登る人視点の頂上到達動画」を見てしまったとします。登山の場合は「空気感」「疲れ」なども趣味の一部なので、それだけで登りたい気持ちはなくなりませんが、ゲームプレイ動画の場合は「超ボスを最強装備で秒殺!」とか「4年間かかって作り上げた私の街を見て!」などを観ると、「ああ、自分はここまでできないや」と考えてしまいます。

素直に自分ができる範囲のことを楽しめばいいのに、という正論が脳裏に浮かびます。

SNSの影響を受けやすい性格なのだから、体験型の趣味になんとかして切り替えたほうがいいのではないか、という気になってきました。しかし食べ歩きは太るし、ドライブくらいしか興味がありません…車は以前、軽い対人を起こしたときのトラウマが消えなくて乗れません…

ペットは趣味か


私は、うさぎの女の子を一匹飼っています。毎日ごはんと水をあげ、室温を調節し、話しかけ、なでてあげます。

ペットを飼うことは趣味に入るのでしょうか。ブリーダーになったり、毎日読者を意識したブログやSNSを書いていれば、趣味とも言えるかもしれませんが、私が彼女に感じている関係はルームシェアをしている友人や恋人に近いものです。それにうさぎの世話は面倒でも必ずやらなければならないので、やらなくてもいい「趣味」とは違う気がします。


そんなこんなで自分がもやもやと悩んでいることを書き出してみたのですが、やはり自分の思考パターンの問題な気がします。
楽しいことよりも、楽しくない理由を探しているというか。

こういうときは小さな成功体験を重ねるしかないことを、長年の経験から知っています。
ゲームの難易度を下げてみたり、数日でできるニット作品を作ってみたり、手芸のワークショップへ行くことを考えてみようかと思います。

趣味で心が安らがないと、趣味を楽しむための本業もちゃんとできなくなってしまいますから。


投稿者名 うぇびん 投稿日時 2019年02月02日 | Permalink

クイズメーカーでWordPressとMTとa-blog cmsのクイズを作った感想


今日からウェビングスタジオの2019年の営業開始です。宜しくお願いいたします。

今年もいろいろとCMSで変わったことをするつもりですが、正月休みにさっそくやっていました。
簡単にクイズを作れるサービス「クイズメーカー」で、WordPressとMovable Typeとa-blog cmsの横断知識がないと満点を取れないというクイズを作って公開しています。

すべての知識がなくても、どれかが詳しければ6割は正解できるようにしています。興味がある方は挑戦してみてください。

https://quiz-maker.site/quiz/play/JtfVPB20190102113456

裏付けを取る

軽い気持ちで作り始めたものの、10問揃うのには丸二日かかりました。問題が正しいかの裏付けを取らなくてはならなかったからです。

例えば4問目の「以下のうち、初期状態でダッシュボードに『最近の投稿』が表示されているCMSはどれか。」はすべてのCMSの最新バージョンのダッシュボードをチェックしなくてはいけませんでした。自社開発のa-blog cmsは、しれっと機能が増えていたりするので…

それを逆利用したひっかけ問題もあります。

思ったより正解率が低い

横断知識が必要なものの、すべて選択方式にするなど、個人的には割と簡単にしたつもりでした…が、正解率は現時点で40%くらいです。ううむ、問題文が分かりづらかったのだろうか。正直すまんかった。

WordPressの基本用語を問う1問目の回答率が、これを書いている時点で33%でした。
私は勉強会で、初心者の人には用語は無理に覚えなくていいと話しています。しかし実務で頻繁に使うようになり、テクニカルディレクションをする場合は話は別です。基本用語の正確な使用は、資料作成の際に、読み手=更新担当者の理解度に直結します。MTユーザーが多かったのかな?と思いつつも、この結果はちょっと残念です。

全く同じ機能は少ない

横断知識を問う問題を作りはじめた段階で、CMS間で機能の概要は同じでも、完全に同じとは限らないということに気付いてけっこう悩みました。

特にテンプレートタグは、細かいオプションが異なるとか、適用範囲が異なるとかの障害が多く、思ったより問題を作ることができませんでした。「これはどのCMSのタグ?」なんて簡単すぎますし…

10問目の問題文に「各CMSの記事中には、常に一点の画像もしくはアイキャッチが存在する前提とする。また、属性は無視する。」という冗長な前提が書いてあるのもそのためです。WordPressのthe_post_thumbnail関数は属性も出力するためです。
更に細かいことを言うと、10問目のMovable Typeは、このタグだけでは期待した動作にはなりません。前後を「記事中にアップロードされたアセットを呼び出す」ブロックタグで囲む必要があります。ここで間違えて「ファンクションタグ」と書こうとしてMovable Typeの公式ドキュメントを調べに行ったのは内緒です。

「クイズを作る」というブレインストーミング

このような高難度クイズになってしまいましたが、せっかくなのでもっとたくさんの人にやってみてほしいです。

クイズを作りながら「CMS間の横断知識を書いたサイト」を作るための構想を練っていました。これは数年前から考えていたことで、「○○をするには△△のCMSでどのようにすればよいか」というのをまとめたいのです。クイズのような軽いものは、ちょうどいいブレストになるなあと思いました。

何かをしたことをきっかけに、新しいアイディアが芋づる式に出てくるかもしれません。迷いも多いですが、私もいろいろ手を動かしてみようとおもいます。


投稿者名 うぇびん 投稿日時 2019年01月07日 | Permalink

2018年の振り返り

2018年もあと3日です。今年は曜日の関係で昨日まで営業日だったので、来年は6日まで休みです。自分の制作やサーバーのメンテナンスをする予定です。 今年は公私ともに、あとでターニングポイントになるだろうと思える年でした。売上や体外活動などは、10周年とは思えないほど微妙でしたが、思ったより自分を責める気持ちはありません。

自分と向き合う



今年の4月1日で、ウェビングスタジオとして開業して丸10年になりました。節目の年ではありましたが、二年ほど続いている体調不良や気力の衰えがひどく、投げやりになっていることを周囲に指摘されるくらいでした。
10周年だからと、無理に何かをはじめても良い結果にならないと思い、仕事のペースを落として弱った自分のケアにあてました。

体調不良については病院を変えて定期的に通った結果、薬が効いて、ずいぶん集中できるようになりました。

さらに、週二回くらいは運動する習慣をつけようと、ウォーキングをはじめました。夏の間は豊平川の河川敷を歩いていましたが、雨の日や冬の日はどうする、という問題にぶち当たったので、今は近所のジムに通っています。

やせるとか筋力をつけるとかは置いといて、自分が苦手としている「細く長く続けること」を重視しています。

気力の衰えについては「なぜこんなに弱っているのか?」「結局自分はどうしたいのか?」という自問を続けています。また「完璧を目指さない」「この状態で8割できればいい」と考えるようにしてきました。
10月から再開したこのブログが自前ではなく、a-blog cmsの公式テーマなのもそういう理由です。

来年からは、またがんばらないといけないなと思っています。貯金ができるくらい稼ぎたいですね。5,000兆円欲しい。

CMS関係の節目

仕事の方では、普段扱っているCMSすべてに、大きなバージョンアップがありました。

3月に、管理画面からのアップデートと大幅なテンプレートエンジンの変更を実装した、a-blog cms2.8がリリース。
4月に、コンテンツタイプを実装したMovable Type7.0がリリース。
そして12月に、ブロックエディタを実装したWordPress5.0がリリースされました。

これに伴って、それぞれのコミュニティは例年よりも活発だったように思います。扱いやすくなったからなのか、私がエバンジェリストをしているa-blog cmsに新規ユーザーがずいぶん増えたのもうれしいことでした。

表では書いていませんが、スマホで更新できる個人的な日記を作ろうと、Craft CMSの構築も少し勉強しました。結局日記は「Bear」で書くことにしたのでそれはお蔵入りになりましたが、UIがすばらしいCMSなので、ぜひもっと勉強していきたいです。

地震のこと


9月6日の深夜、ゲームをやっていて、そろそろ寝ようと思ったところで、体験したこともない揺れがありました。
SwitchとGitHubの丸っこいマグカップが飛んでいきました。うさぎの傍らで何もできずブルブル震えていました。

私が住んでいる地域は道路にヒビが入ったのと、停電の復旧に時間がかかった程度でしたが、それでも物資不足に悩まされる日が一週間続きました。

一ヶ月もすると、街から観光客の姿が消えてしまった以外は平穏を取り戻しましたが、「明日、命にかかわることがあったときに後悔しないか?」と考えるようになりました。いや、どんなに努力しても後悔するとは思うのですが、それだけの気持ちで生きたり仕事したりできているのだろうかと。また、ちゃんと備えはできているのかと。

大杉漣さんやさくらももこ先生など、まだ元気だと思っていた方の訃報が続いたこと、平成最後の年をまっとうしようとする天皇陛下の姿も、気持ちに影響しているかもしれません。

王様ランキング

今年は心に響くメディアにいろいろと出会った年でした。「ラーメン食いてぇ!」「ボヘミアン・ラプソディ」なども心に残りましたが、自分の気持ちに一番影響を与えたのは、ウェブ漫画「王様ランキング」だと思います。

https://mangahack.com/comics/5207

主人公は生まれつき力が弱く、聾唖の障害を持っています。ですが物語が進むにつれ、様々な人との出会いを通して、彼しか持てない能力を見出されて、自分に自信を持つようになります。

その主人公の姿も心打たれるのですが、彼の剣術の師匠が、別れの際にかける言葉がとても好きです。



師匠は主人公に「あなたが気にしていることは、もしかしたらあなたの長所なのかもしれない」「できれば自分の全てを愛しなさい」と言います。

自信を持つということは、自分の長所だけに目を向けるのではなく、自分の欠点(だと思っているだけかもしれない)も愛するということなのかと、じんときました。

同時に、こんな風に相手が求めていることを言い、鼓舞できる人になれたら、とも思います。デスパーさんはナルシストだし金に汚いですけどね。

来年もがんばります



ずっと作っていた、CMSテーマ向けのCSSフレームワーク「echo.css」が、今年の後半になってようやく公開できました。

https://cms-skill.com/echo-css/

まだまだ欠点だらけで、しょっちゅう修正をしています。ですが、現場での現実的な制作を考慮した「私らしい」フレームワークになっていると思っています。このフレームワークは来年も手を入れていきますし、CMSテーマの制作もしたりします。

来年も自分のあり方に悩んだり詰まったりしつつも「昨日より明日を良くするため今日がある」という気持ちで頑張っていきます。どうかお付き合いください。


投稿者名 うぇびん 投稿日時 2018年12月29日 | Permalink