after work Lab

好きな事だけをお勉強させていただきまーす

自分のブログのレベルがわかる「格付け・番付け」の判定方法

はじめに

 

とうとう「怠け者ブロガー」が定位置になった"あトん"です。

 

はてなブログに移ってきて1年を過ぎましたが、ブログを書くのが面倒臭くなってしまい、今はブログを書くより読む方が楽しく最近は見てばっかりです。

 

でもこれは勉強するのが嫌な生徒と同じで、好きな事に逃げてしまっている状態ですね。

 

そんな中「サルワカという個人メディアを250万PV/月にまで育てた方法」という記事が6月3日に公開されました。

サルワカという個人メディアを250万PV/月にまで育てた方法|CatNose|note

サルワカというWebメディアを運営してきた。僕を中心に、数人のライターが記事を書いている。それぞれが別の本業を持っている。あくまでも気ままに更新するメディアだ。 サルワカを始めたのは2016年の12月。 その1年後には200万ページビュー/月を超え、1年半後の今では、250万ページビュー/月を超えた。 ページビュー(PV)はサイトの価値を示す1つの指標にしか過ぎないが、個人運営のメディアでここまで到達できたのは嬉しい。 最近は本業の方が充実してきて、僕はほとんど記事を書けていない。記事執筆に時間をかけたい思いはあるが、それがいつになるかは分からない。 ただ、せっかくある程

この記事を読んだ感想は「ブログのアクセスアップは小手先のテクニックはあまり役に立たない。明確なコンセプトに基づいて戦略的に良記事を構築して行くことだ。」と再認識させられました。

 

しかし、普通の人はなかなか実行できるものではありません。

 

怠け者ブロガーは一体どう戦略を立てればいいの?と考えた時、まず自分のブログはどのレベルなのか「立ち位置」を確認することが大切だと気づきました。

 

そんなお悩みを抱えているブロガーに少しでもお役に立てればと思い、楽しいことを我慢してこのブログを書くことにしました。(笑)

 

 

 

振り返り

具体的な分析に入る前に下のお題についてちょっと考えてみて下さい。

 

①そもそも自分は、何の為にブログを書いているのでしょうか?
②それが実現できているかを、何で判断してますか?
③その目的を達成する為に一番有効な手段は、何だと思ってますか?

 

①はざっくり3つのタイプに分けることが出来ると思いますが、あなたはどのタイプの側面がより強いか考えてみて下さい。

 

タイプA

とにかくお金が稼げるようになりたい。その為にライティングを磨き、アフェリエイトが出来るサイトを構築し、毎月○万円以上の報酬を安定して得たい、という方。

 

タイプB

誰かの役に立ちたい、自分の考えや作品を世の中に発信したい。そして「いいね!」「スター」「はてB」「コメント」を通じて「承認欲求」を満たしたい、という方。

 

タイプC

単なる日記・備忘録。人に言えない悩みや愚痴を吐き出しストレスを発散させてる、という方。過激な内容だと炎上し逆効果になるリスクがあるブログです。

 

タイプCの方にはこれから説明する内容はお役に立ちませんが、興味があれば読み進んで下さい。

 

タイプAとタイプBの両方出来るすばらしい人は、こんな弱小ブログを読むより記事を更新すべきでしょう。

 

と言うのは冗談ですが、正直両方を両立できる方は素晴らしいと思います。

 

しかし「二兎追うものは一兎をも得ず」という格言もあるので、どの目的が第一優先かを明確にして取り組むことが大切だと思います。

 

②の実現出来ているかを判断する基準はいろんな指標がありますが、客観的に判断できる指標の1つは月間PVだと思います。

 

この月間PVを上げる為の手段は、どのタイプの方かによってアプローチが若干変わって来ます。

 

タイプAはSEO対策を十分に考慮する必要がありますが、タイプA・タイプBのどちらにも共通して重要なことは「記事の質」ですね。

 

さて、ここで話が少し変わります。

 

このブログを書いている"あトん"はどんなタイプなのでしょうか。

 

・・・

 

"あトん"はアフェリエイトをやってないので基本タイプBですが、時々タイプCを織り交ざるハイブリットタイプです。

 

しかし、最近ブログの更新を怠けており「怠け者ブロガー」が定位置になってしまいました。

 

なぜ怠け者ブロガーになったのか

理由は簡単でブログを書くのが「面倒くさい病」が進行したからです。

 

これは「うつ病」や「ひきこもり病」とは少し違います。

 

「面倒くさい病」は「さぼり病」とも言われ、脳が嫌だと判断したら自分の意志とは無関係に楽な行動をとってしまうものです。

 

より具体的に説明すると

 

「帰宅後ご飯・お風呂のあと、好きなお酒をついたくさん飲んでしまい、朝4時頃目が覚めリビングの床にパンツ一枚で寝ていたことに気づきボーッとしてると、何でベットで寝ないの!とかみさんに怒られ、寝不足のまま仕事に出かけ、今日もブログが1行も書けなかった。」

 

を愚痴る状態のことです。

また、日常生活の中で「言われてからやる」「言われてもすぐやらない」「そのうち言われたことを忘れてしまう」等が起きていたら「面倒くさい病」に侵されている可能性があるので注意が必要です。

 

「面倒くさい病」は非常に強力なウイスルなので、一度直っても再発する恐れがある怖い病気です。特に現状に満足しがちな人は、この病気が発症しやすい体質だと言われてますのでご注意下さい。

 

ではブログを書くのが「面倒くさい病」にかかった人がブログを立て直すにはどうすれば良いのでしょうか。

 

「誰でも簡単にできる」とタイトルが入った治療方法は、長続きせず失敗した時リバウンドが大きいので、あまりおススメしません。

 

無理に治療せず「面倒くさい病」と上手に付き合っていくのが得策だと思います。

 

前置きが長くなってしまいましたが、本題のブログのレベルを評価する格付け・番付け方法を説明したいと思います。

 

事前確認

ブログを客観的に判断できる指標の1つは月間PVだと説明しましたが、この月間PVを増やすための方法はいくつもあります。

 

次に説明する3つの手段のうち、皆さんもどれか1つ以上を実践されていると思います。

 

①読者数を増やす

読者の数を増やす方法ですが、良記事を書けば自然に増えると言ってしまうと当たり前すぎますが、まずは訪問者に興味を持ってもらえる内容かどうかだと思います。

 

炎上・バズって読者を増やす、というハイリスク・ハイリターンな方法もありますが、所詮、あぶく銭のようなものです。名ばかりの読者だらけで、実際は読まれてないかも知れません。

 

②記事の数を増やす

3か月で100記事を目標に毎日記事を更新すると良い、という話をよく耳にしますが、実際に達成されている方は3か月後にPVは確実に増加しているようです。

 

但し、そこから一桁二桁収益を上げる為には、記事の質を更に上げていく必要があり、稼げるブロガーとあまり稼げないブロガーの別れ道になってるようです。

 

③記事の質を上げる

これはPVを確実に上げる王道です。ユーザの立場に立ってどれだけ分かりやすく丁寧にまとめることが出来るかが勝負です。また、どの分野で戦うかもポイントです。

 

すでに独占・寡占状態の分野に挑戦しても泣きを見るだけなので、自分だからこそ書ける内容に特化することも重要な戦略となります。

 

小まとめ

ここまでをまとめると、タイプAの方は②記事の数と③記事の質、タイプBの方は①読者数と③記事の質に力を入れていると思います。

 

「全部力を入れているよ」という場合のPVは下の図のように増加すると思います。

 

では、まず最初にタイプA、タイプBの共通指標であるPVを指標にしたブロガー番付を紹介します。

 

もしご存知でしたら、ここは読み飛ばして下さい。

 

PV数でわかるブロガー番付

PV数でわかるブロガー番付-あなたのブログはどのレベル? | ブログ部

あなたのブログのPV(ページビュー)はどのくらいですか? このブログ部によく寄せられる質問の一つに、 「月間5万pvになるとどのくらいのブログ収入になるの?」とか、 「ブログのアクセスが20万pvあるんだけど、それって良いの?悪いの?」 …というものがあります。 ブログはどのくらい稼げるのか? 他のブログと比べ、自分のブログはどのくらいのポジションなのか? …については、やはりみなさん気になって

出典:ブログ部 PV数でわかるブロガー番付|あなたのブログはどのレベル?

 

この番付表は月100万円以上稼ぐ「ブログ部」のsanchoさんが2015年12月に公開されたものです。

 

PV別に「ビギナー」から「神」まで10段階に番付がレベル分けされており、ブログを主要収入源にしたい方はセミプロの100万PVが当面の目標と言われてます。

 

これを表にまとめてみると以下のようになります。

 

"あトん"のブログは2018年6月末時点では月間PVが24000若なので、レベルは中級、番付はノービスでした。もしアフェリエトをやっていれば月1920円の広告収入を手にしていたかも知れません。

 

2020年5月5日追記

 

記事のURLを全変更したためインデックスがなくなり、現時点では月間PVは2000迄下がってしまい、一兵卒に戻りました。(笑)

【悲報】ブログの自動生成URLは便利だが、後で地獄を見るかも知れない。 - after work Lab

はじめに なぜカスタムURLにすべきなのか Googleにインデックスされないリスクがある 記事のリライトが楽 ブログ分析で困まる 記事URL変更のリスク 旧記事URL→新記事URLの自動転送はできる? 自動転送と404 Not Foundの対応方法 事前準備 自動転送のコード 第一部(自動転送)の構成 第二部(お詫びと別記事表示)の構成 使用方法 お詫びの表示サンプル まとめ ♡いいねは... ・・・まったく思ってませんはてブが少ない …

 

 

次は読者数でブロガーレベルを判断する方法を紹介します。はてなユーザでない方は読み飛ばして頂いて結構です。

 

はてなブログの読者数から考えるブロガーレベル

はてなブログの読者数から考えるブロガーレベル - Iruca Log

こんにちは、イルカです。こちらの記事ではてなブロガー達を巡回して読者数を集めるプログラムを書きました。せっかくなのでこの集めたデータを使って何か分析をしたいなあと思ったところ、 Hagexさんのこちらの記事を見つけたので今回の「はてなブログの読者数でブロガーを分類する」ネタを思いつきました。大抵ブログの右側にある、こういう数値が読者数ですね。はてなブロガーが気にする重要な数字の一つになっています。 実際に収集して分析したデータを元に作った、読者数によるはてなブロガー分類がこちら! (ランダムにピックアップした10125件のブログデータを元に解析しています。)読者が21人居れば、上位50%。 読…

出典:Iruca Log はてなブログの読者数から考えるブロガーレベル

 

これは2017年4月にイルカさんがphthonではてな読者10125人をクロールして解析された結果です。

 

"あトん"のブログの読者数は2018年6月末時点で292人なので上位5%内に入っていて格付けはプロでした。

 

「本当かよ」って感じですが「プロ」の実感はまったくありません。むしろ、怠ける「プロ」の自覚はあります。

 

月に1回か2回しか更新しないのに読者になって頂き感謝の言葉しかありません。読者の方にはこの場を借りてお礼申し上げます。

 

さて、イルカさんのピラミッドグラフを円グラフにすると下のようになります。

 

上位0.1%は神を超える者ですが、勝手に「全王」と名付けさせて頂きました。

 

例えば、読者が21人~94人の方は全体の30%の中に居ると考えて下さい。

 

なお、プロクラシストさんも2017年7月に2万件のデータで同じ解析をされてます。両者を比較してみましたが大きくズレはなく、信頼性の高い結果でした。

ブログは一年続くの?読者数は?2万件のはてなブログで分析する - プロクラシスト

こんにちは、ほけきよです! 私はそれほど実績がないので、ブログ論を語ることは出来ません。でも、データに語ってもらうことは出来ます。 良くある「ブログは継続が難しいし、大事だ」といいますね。 そりゃそうなんですが、どのくらい難しいのか、また、どのくらい大事なのか というのはあんまりわかんないですよね。 なので、今回は、はてなブログをぶっこ抜いて、...トグラム 継続期間と読者数 どうやって調べたのか ブログリストを作る 色々と必要なデータを取る 継続期間を抽出する 分析する まとめ ブロガーの生…

 

次はブログの更新頻度から見たブロガーの分布です。

 

ブログの更新頻度調査

53%が「●●が面倒でブログをやめた」と回答。「多忙」「飽きた」の声も

ライフメディアは3月5日~13日にかけて、全国の10代から60代の男女を対象にブログに関する調査を実施した。有効回答は6,566サンプル。

 

これは2013年3月にライフメディアのリサーチバンク調べで公開されたデータです。 

 

Q4.ブログの更新頻度を教えてください。という問いの回答が下記棒グラフでまとめられてます。母数は874人で更新頻度は7段階です。

 

上の棒グラフを円グラフに変換してみました。

 

これは全体の結果です。

 

全体の56%の方が週1回以上ブログを更新していることが分かります。

 

これは1日のアクセス数が100以下の方の分布です。

 

アスセス数が少ない方の49%は更新頻度が週1回未満となってました。

 

これは1日のアクセス数が101以上の方の分布です。

 

アクセス数が多い方は88%が週1回以上更新していることがわかりました。

 

更新頻度が高いほどアクセス数は多い、という当たり前の結果ですが、1日のアクセス数が101以上の方はどれくらいいるのでしょうか。

 

これはQ3.ブログの1日の平均アクセス数を教えてください。という問いがあり、棒グラフにまとめられてました。

 

例によって、これも円グラフに変換してみました。1日101以上のアクセスがあるのは全体の13.3%であることがわかります。

 

前半のまとめ

1日のアクセス数が501以上の方を月間PV3000以上とすると、

ブログをやっている96.7%はビギナーで、月間PV3000以上でやっとビギナーを脱出でき、アフェリエイトについて考えてみても良いレベル

と言えるのではないでしょうか。

 

はてなブログの格付け基準 

 

後半は、はてなブログユーザ向けの内容ですが、はてなユーザの生態がわかる面白しろいデータを紹介します。興味があれば、もうしばらくお付き合い下さい。

 

はてなでは「はてなブログ」をどれくらい使い倒しているかをチェックできる 「ブログチャレンジ」というチェックリストを2016年1月に公開してます。

 

これを利用すると自分がどれくらい成長したか、どのレベルのブロガーかを評価できます。このシステムの仕組みを次に紹介したいと思います。

 

ブログチャレンジ 

2016年、いまブログの伝説がはじまる……! 新機能「ブログチャレンジ」で、新春特別企画に挑戦しよう! - はてなブログ開発ブログ

はてなブログでは2016年1月1日、新年の幕開けにふさわしい新機能として「ブログチャレンジ」をリリースいたしました。初春を飾る7日間の限定ミッション「新春 お正月限定チャレンジ」をクリアし、伝説のブログマスターへの一歩を踏み出してください。

 

ブログチャレンジは4種類にわかれており、達成ポイントの総合計は214pt、総合計TASKは91個、Lv.13段階で評価されます。

 

初級 ブロガーを目指す君へ総34pt、総TASK24個

中級 ここからが本番だ!!総43pt、総TASK30個

上級 ブログマスターへの道総112pt、総TASK24個

新春 お正月チャレンジ総25pt、総TASK13個

 

チャレンジ前は全員「駆け出し」からスタートです。

 

"あトん"が約1年ブログを続けた結果のレベルをチェックした結果がこれです。

Lv. 11 (silver)、獲得ポイント87pt、達成TASK47個

ラブリーエンジェル覇者 aTnの称号を獲得できました。

脱ビギナーレベルの方は初級だけでなく中級・上級のTASKもチェックしてみて下さい。きっとクリアーしている項目があると思います。

 

下のグラフは獲得ポイントと到達Lv.の関係を、初級→中級→上級のTASKを順にクリアーして行った場合を図示したものです。

"あトん"はLv.11なのに獲得ポイントは87なので、上記グラフではLv.の位置が合ってません。獲得ポイントでLv.を決めることはできないので困りました。

 

試行錯誤した結果、獲得ポイントと達成TASK数を乗算し平方根を取ったものを、ブログパワーと名付け再度作図すると上手く行くことがわかりました。

 

"あトん"のブログパワー:BPは64となり、Lv.は11以上Lv.12未満で合致します。

表にまとめると下のようになります。

ブログパワー:BPを使うと自分のブログレベルを計算出来るので、皆さんも一度試してみて下さい。

 

次に興味深いデータを示したいと思います。ブログチャレンジでは 「ブログを〇日継続」というTASKがありますが、これをクリアーした人数をプロットしたのが下のグラフです。

このデータより、はてなブログで記事を書いたユーザの6.9%は30日4.3%は60日間毎日記事を更新したことがある事を示してます。

この結果は、リサーチバンクのブログ更新頻度と比べると、半分以下なのでとても低いです。きっとはてなユーザは控え目に自己申告しているのでしょう。

 

最後に、"あトん"が読者になっているユーザのブログ更新頻度はどうなっているのか気になりました。

 

なぜ気になるかですが、"あトん"と同じくらい怠け者ブロガーがどれくらい居るのか、お仲間を確認したかったからです。(笑)

 

気軽な気持ちでリサーチしたのですが、ともて大変な集計作業で「Python」を勉強してなかったことを大変後悔しました。

 

しかたがないので、手作業で集計したのですが、結果、皆さんのブログをじっくり読む機会となり、集計とは無関係なデザインの部分とかも見れ、良かったと思います。

 

はてな読者のブログ更新頻度

独断と偏見で「働き者ブロガー」「のんびりブロガー」「怠け者ブロガー」を3つに大分類し、更に8つのAA~Gランクに分類しました。

これをまとめたのが下の表になります。

判定に使用するのは更新回数/月ですが、その他全部で9種類のデータを調べました。

 

調査対象

 "あトん"が読者になっているブログ1000サイトの中から275サイトを無作為に選びました。(過去1年半以上更新がないブログは調査対象外にしてます。)

 

調査期間

 2017年1月~2018年5月

 

抽出データ

・更新回数/月 
・読者数
Twitterのフォロー数とフォロアー数
・ID
・使用しているテーマ
・ブログ開始日
・Proの有無
・スター廃止有無
HTTPS化有無

計算方法

 各月のブログ更新率を計算し、レベル毎に毎月何人居たかを手作業で集計しました。


 更新率 = 更新回数 ÷ 各月の日数


AA:しゃかりきブロガー  … 200%以上
A:いつもブロガー   … 100%以上
B:ほぼブロガー    … 71%以上
C:ときどきブロガー   … 50%以上
D:ときおりブロガー   … 25%以上
E:たまにブロガー    … 14%以上
F:とりあえずブロガー  … 3%以上
G:まれにブロガー    … 3%未満 

 

では、結果を説明します。

 

この棒グラフは縦軸がブロガー数で横軸が月になってます。2017年1月から2018年5月まで月毎に更新頻度別にランク付けしたブロガー数の積算値となってます。

 

一番右は過去1年半の更新数で算出した平均値です。

合計人数が1年半で170人以上増えてますが、これは"あトん"が毎月新規に読者になって読者数が増加したためです。

 

棒グラフだと各ランクの割合がわかりずらいので円グラフに変換してみました。

 

Pro+無料ユーザの格付け別割合

Proユーザのみの格付け別割合

両方共通して言えるのは、「働き者ブロガー」が全体の約3割を占めていることです。

 

「働き物でないブロガー」は約7割「働き物ブロガー」は約3割なので、ビジネスの現場でよく使われる7対3の法則となり面白い結果となりました。

 

また、一番多かったのは「ときおりブロガー」で全体の約1/3を占めてました。

 

「怠け者ブロガー」は全体で8.8%ですが、Proのみだ4.3%まで下がり、お金を払っているProユーザは怠け者が少ないことがわかりました。

 

超働き者の「しゃかりきブロガー」は約2%で50人に1人の割合ですね。

このブログでは公開を差し控えますが、心当たりの方は自分を褒めてあげて下さい

 

まとめ

ブログは継続が命、ということが数々のデータからよく分かりました。PVを増やすには、質が高い良記事を書くことが大原則ですが、記事の更新を怠るとドメインパワーが下がり、PVを維持できなくなる恐れがあります。

 

「働き者ブロガー」である必要はありませんが「怠け者ブロガー」はブログの存続が危機的状況だと認識し、そこから脱出する努力が必要ですね。(汗)

 

余談 

実は昔"あトん"は「働き者ブロガー」だった時代がありました。

 

2017年5月にFC2ブログから引っ越して来ましたが、実はFC2ブログの前は「Blogger」で記事を書いてました。運営期間は約5年です。

何の記事を書いていたかは割愛しますが、あるニッチな分野に特化したブログでした。今はブームが完全に去ってしまったので1年前に更新を完全にストップしてます。

 

Bloggerは初めてのブログだったので当時毎日更新を頑張ってました。

 

投稿した総記事数は5年間で3737です。

5年平均だと毎月約62記事となりますが、最初の2年間で2500記事以上投稿してましたので、ピークの2年間では毎月約100記事投稿していた計算になります。

 

Bloggerを3年半続けたあと消耗感・孤独感を感じました。

 

フォローの合計が0で、主要閲覧者のアクセス元は62%はアメリカでした。なぜアメリカが多いのかはいまだ謎です。

Bloggerの総トータルページビューは約85.4万PVです。総記事数は3737なので、1記事当たりのページビューに換算すると228PVとなります。

 

一方はてなブログの総トータルページビューは2018年6月末時点で約16.1万PVです。総記事数が37記事(この記事を除く)なので、1記事当たりのページビューに換算すると4367PVです。

 

PVを記事の数で稼ぐか、記事の質で稼ぐか、どちらも大変です。バランスが取れるまで、これからも修行が必要みたいです。

 

いづれにしても「面倒臭い病」を何とかしないとダメですね。

♡いいねはこちら

この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。

 この記事のツイートを♡いいねする

 

それでは今回の記事はこれでおしまい。

 

お気に入りのボールペンを復活させた方法とは

はじめに

 

この記事はインクが無くなり使わなくなってしまったお気に入りのボールペンを復活させた方法の紹介です。

 

もし同じ種類のボールペンを使用している方で困っている方は参考にして見て下さい。

 

なぜボールペンを使うのか?

PC・タブレット時代でもボールペンは必要です。

 

なぜ必要か?それは紙があるからです。当たり前ですね。

 

もちろん、紙なんて使ってないよ、PC・タブレットで十分という人もいると思います。

 

会議や打ち合わせでメモをとることがあると思いますが、PC・タブレットはメモをとっているふりをしてツイートしたりエッチなサイトを見ることも可能な便利なツールです。(笑)

 

しかし、伝票にサインしたり、ポストイットに伝言を書いたり、書類やパンフレットにメモったり、とペンがないと出来ないことはたくさんあります。

 

そんなの100円のボールペンでいいじゃん、と言われると思いますが、

仕事を効率的にこなしている人は、実はペン1つにもこだわっている場合があります。

 

ただ書ければよい、というものではないのです。

 

機能で比較すると日本製のボールペンが一番使い易くコストパフォーマンスが高いと思いますが、持ち物としての価値を考えると、歴史が長いPARKERやCROSSの高級ボールペンを選択する方が多いのではないでしょうか。

 

但し、困ったことに高級ボールペンは替芯の価格が高く、線幅の種類が少ないです。書き味は良いんだけど太すぎてシャープな文字が書けない。

 

そしてだんだん使わなくなり、引き出しの奥に眠ってしまう場合が多いのではないでしょうか。

 

実は"あトん"もお気に入りのCROSSのボールペンを持ってます。

 

なぜ買ったかと言うと、最高の仕事をしているフリが出来るからです。

 

と言うのは冗談で、ユニークな外観に一目ぼれしたからです。

 

しかし、インクが無くなったのを最後にお蔵入りとなってしまってました。

 

前置きが長くなってしまいましたが、どのようにして復活させたかを説明したいと思います。

 

眠っていたCROSSのボールペン

週末棚の中を整理していたら珍しいものが出てきました。


「CROSS ion metal」という未来的なボールペンです。

 


「CROSS ion」は長さ90㎜の手のひらに収まるサイズのジェルインクボールペンで、ワンスライドで芯が出るギミックな機構を採用してます。(使用時の長さ108㎜)

 


後で知ったのですが、2003年にグッドデザイン賞を受賞してました。

ボールペン [クロス アイオン]

グッドデザイン賞の仕組みや、過去のすべての受賞対象が検索できる「グッドデザインファインダー」など、グッドデザイン賞に関する情報をご紹介するサイトです。毎年1回(4~6月頃)募集する、グッドデザイン賞への応募もこのサイトから行うことができます。

 

「CROSS ion」はクリップが無いのでキーリングトップと呼ぶリングキャップにペン先を固定し、ランヤードで首から吊り下げて持ち歩きます。

 


目立ってそれなりにカッコイイのですが、ボールペンとは分からないので、おじさんが大きな首飾りをぶら下げているように見えます。(笑)

 

なお、リングキャップは樹脂製なので何百回もの取り外しには耐えられそうにありません。止め口がバカになると、落下して壊れるか、紛失してしまう危険があります。

 

結局、インクが無くなったのを機会に使うを止め、国産の3機能ペンに変えました。

 

「CROSS ion metal」を目覚めさせる

今改めて眺めてみると、芸術的と言うと大袈裟ですが、このギミックなボールペンをもう一度使いたくなりました。

 

インクが無くなったので使わなくなったと書きましたが、正確には予備のインクカートリッジは1個持っているのですが使用するのを止めたのです。

 

理由はCROSSのインクカートリッジは筆記線が太すぎて若干インクが滲むからです。


これはそれで味があるのかも知れませんが、日本製のボールペンの方が書き味は良いです。

 

そこで市販の替芯を使用できるようプチ改造することにしました。

 

用意するものは3つです。

①空カートリッジ

②φ3の替芯

③φ3のドリル

 

「CROSS ion metal」のリフィル方法

ionのグリップを回転しユニットを2つに分け、空カートッジを取り出します。

 

インクが無くなった空カートリッジの先端をカッターでカットします。

 

 

φ3のドリルを使って先端に穴を空けます。

 

 

 

φ3の替芯はuniのJETSTREAM SXR-80-07 0.7mmを使用します。

 

替芯を適当な長さにカットし、穴を空けた空カートリッジに挿入します。

 

 

空カートリッジのお尻のキャップは外れるのですが、キャップの中央の溝があり、替芯が上手い具合に収まります。

 

約80円でリフィール完了です。


交換後のJETSTREAMの書き心地はバツグンですね。

 

「CROSS ion metal」これからも長く大切に使って行きたいと思います。

 

余談

実は記念品で頂いた新品未使用のCROSSのボールペンをもう1つ持ってます。

 

クラシック センチュリー AT0085-108 クローム

 

 

替芯はセレクチップローラーボール替芯(ジェルインク) 黒 8523でした。

 

頂き物のボールペンは好みのものでないとなかなか使う気になりません。細身のボディは手帳に挿すにはカッコイイのですが、これで文章を書くのは辛いですね。

 

契約書等の重要な書類にサインする時、使おうかなと思います。

 

たぶん、ずっと機会は来ないと思いますが。

 

ところで、おまきざるさんが、先日CROSSセンチュリーの替芯を三菱鉛筆 uniのSK-8に換装する方法をブログで公開されてました。

CROSSセンチュリーボールペンが替え芯(リフィル)SK-8で蘇った - おまきざるの自由研究

あなたの机の引き出しにCROSSセンチュリーボールペンが眠っていないでしょうか? もし使わないままのがあるのなら,芯(リフィル)をSK-8に替えると鮮やかに蘇ります.SK-8は純正リフィルの半額以下で購入できます.ぜひお試しください. 10年来眠っていたCROSSセンチュリーボールペン 三菱鉛筆 替え芯 SK-8 CROSSボールペンの現行リフィルとラインナップ SK-8でCROSSセンチュリーボールペンが蘇った 10年来眠っていたCROSSセンチュリーボールペン 以前,仕事でインドネシア(現地の人もほとんど行かないような奥地)に通っていた頃,シンガポール航空の機内販売でCROSSセンチュリー…

 

CROSSセンチュリーはSK-8が使用できることが有名みたいなので、同じ種類のボールペンを持っている方は試す価値があると思います。

 

"あトん"は悩み中です。SK-8は色は黒しかありません。本当は青が欲しいのですが。

 

♡いいねはこちら

この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。

 この記事のツイートを♡いいねする

 

それでは今回の記事はこれでおしまい。

 

【買替え不要】古いウォーターオーブン「ヘルシオ」で新メニューを使う方法

f:id:aTn:20210116211344j:plain

 

最近ツイートする方が楽でブログを書くのが面倒になってきてる管理人です。

 

前回のブログからだいぶ日が経ってしまいましたが、ヘルシオの使い方で悩んでいる人がいるのではと思い、お助けできないかとブログにまとめてみました。

 

従って、この記事はヘルシオは持ってないけどオーブンレンジの買換えを考えている方、ヘルシオを持ってるけど新機種の新メニューが使えず悔しく思っている方が対象です。

 

前半では"あトん"がなぜヘルシオを買ったのか説明します。後半で新機種の新メニュを旧世代の型落ち品で使う方法を解説します。

便利でおしゃれなOXOの野菜水切りサラダスピナー

はじめに

 

おひさしブログです。

 

つまらないダジャレをつぶやいてしまいましたが、今回紹介する記事はアングルドメジャーカップで有名なOXOの野菜の水切りサラダスピナーに関するものです。

 

回転式の水切りボールはたくさん種類がありますが、OXOのサラダスピナーは人気ベスト3に入っている製品です。

 

水を切るだけであれば手回しのハンドルをガンガン回す構成の物で十分ですが、あまりおしゃれな感じはしません。

 

テーブルに置いたり冷蔵庫に収納することを考えると、OXOのサラダスピナーが一番バランスが取れているのではないでしょうか。。。

 

これから説明するのは1年前に買い換えたサラダスピナーに関する考察で、OXOのサラダスピナーで作るおいしいサラダの説明ではありませんのでご了承下さい。

 

サラダスピナーの買い換え

OXOのサラダスピナーの値段は決して安くはありません。老朽化したサラダスピナーの買い替えを検討してましたが、単品だと高いのでなかなか手を出しにくい状況でした。

 

しかし、セットで安売りされているものをかみさんが見つけ、即お買い上げとなりました。定価で買うと6000円を超えますがが、セットのセール品なので半額以下の3000円でした。

 

セール品の中身

大きな紙袋から出てきたのはOXOの調理用品で4種類計5点でした。

 

2 pc Mini LockTop Container Set (120 ml) 

ロックトップコンテナ スモール2ピースセット

 

LockTop Container Small Square - 1.7 Cups

ロックトップコンテナ 0.4L Sスクエア 

 

Angled Measuring Cup - 2 Cup

アングルドメジャーカップ(中)

 

Little Salad & Herb Spinner

クリアサラダスピナー(小)

 

OXOは主婦に割と人気がありますが、我が家も昔から何種類か使ってます。

 

使用頻度が高いのは野菜の水を切るサラダスピナーですが、我が家のサラダスピナーはかなり老朽化が進んでおり、カバーの内側に固定されるフタの爪は2/3が欠けてます。

 

あと一カ所欠けると、ボウルの中のバスケットが回転できなくなり埋め立てゴミとなります。

 

また斜め上から目盛が見えて便利なアングルドメジャーカップは壊れてはいませんが、かなり白化が進んでいます。

 

なぞなぞ 

アングルドメジャーカップを新製品と旧製品を並べてみると外観のデザインは変わってませんが、ある部分に違いがありました。

 

皆さんどこが違うかわかりますか。

 

答:cupsの目盛が違うのです。

 

旧製品はアメリカ規格で1カップ:約237mlの目盛となってますが、新製品は日本規格で1カップ:200mlの目盛でした。

 

粉物やお米は計量カップで計って入れてましたが、味がいまいちだったのは入れる量が違っていたのが原因だったかも知れません。

 

今回軽量カップを買い替え、両方を見比べたので気づくことができました。(笑)

 

サラダスピナー

サラダスピナーは旧型は外観がボウル状ですが、新型は円筒形でスタイリッシュな形に変わってました。フタもフラットなのでサラダスピナーの上に物を置くことも可能です。

 

フタを外した状態です。野菜を入れるバスケットは円筒ドラムです。

 

フタです。フタにはバスケットを回転させる内カバーが取り付けられてます。内カバーは中央の白いロッドを押すとロックが解除され簡単に外せます。

 

内カバーを外した状態です。

 

直径は旧型:φ210cm→新型:φ20.5cm、高さは旧型:13cm→12cmに小型化されてました。重量は強度を増した関係で約500gから約674gに増えてます。

 

普通はここでレビューが終わるのですが、OXOのサラダスピナーはなぜデザインが変わったのか気になりました。

 

見た目は新型の方がカッコイイと思うのですが、円筒ドラムは回転が安定しない形状なので水切り器の性能として評価すると低下しているはずです。

 

実際Amazonのレビュを見ると、新型は旧型に比べ回転スピードが低い為か、
水切り力が今一つで不満を持っている方が若干名いらっしゃいました。

 

ところでOXOのサラダスピナーは片手で押すと中のボウルが回転し水切りできるので、このポンピング機構に関してpatentを出しているだろうと米国特許を調べてみました。

 

サラダスピナーの特許

初期型のサラダスピナーのPatent NumberはUS6018883で、
1999年2月18日に出願されてました。後数年でこの特許は切れますね。

Goggle君の迷訳を読んでみると、予想を大きく裏切る内容でした。

 

発明の名称は「Brake for device for drying foods」食品乾燥装置用ブレーキです。

 

ボウル内部のバスケットの回転を停止させるブレーキに関する発明でした。

 

OXOのサラダスピナーは、中央のノブを片手でポンピングして回転できるのが最大の特徴と思っていたのですが、Claim(請求項)の構成要件にはありませんでした。

What is claimed is: 1. A device for drying food comprising:
a container including a bowl having a sidewall terminating at a top edge defining an opening and a cover removably connected to the bowl and substantially covering the opening;
a basket assembly disposed in the bowl and rotatable relative to the container about an axis, the basket assembly including a basket having a sidewall terminating at a top edge and a lid releasably coupled to the top edge of the basket; and
a brake assembly carried by the cover and engageable with the lid to apply a frictional force to the lid for stopping rotation of the basket assembly.

 

何とサラダスピナーの最大の課題はポンピングで回転させることではなく、回転をすみやかに止めることだったのでした。

 

これは目から鱗でした。

 

ハンドルで手回しするサラダスピナーでは想像できませんが、押したら惰性で周り続けるバスケットを安全に止めるブレーキ機構をフタに付け、回転を止めることがOXOのサラダスピナーの最大の特徴だったのです。

 

ポンピング回転機構ではブレーキは必須の構成部品なので、これで特許が取れたのだからとても強いですね。

 

ただかブレーキ、されどブレーキです。

 

新製品の発売に合わせてpatentも出願されてます。これを時系列に調べていくと新製品はブレーキ機構が小改良されているのですが、patentは従来例に対してこの改良された構成で新規性・進歩性を出しているようです。

 

US6018883 …1999年2月18日出願

フタが白色の初期型はフタのボタンを押すと、ボタンの先端のボスが回転する内フタのトップに接触し、摩擦力で止める構成となってます。

US7448315 …2005年3月17日出願

これはサラダスピナーのフタが透明に変わった商品のブレーキです。

より摩擦力を上げる為、回転するフタの上部に摩擦力が高いエラストマー接触面の軌道に設けたものです。

US20120246959 …2011年3月28日出願

これが新型のブレーキ機構で、ボタンを押すと回転する内フタの円周リブを両側からクリップする構成となってます。

ブレーキを押した状態

以上、超簡単でしたがOXOのサラダスピナーの特許の説明でした。

 

サラダスピナーのブレーキの基本特許はもうすぐ切れます。第三者は似たものを発売してくることになるのですが、新しい特許があるから大丈夫とは言えません。

 

OXOが提案している新しいブレーキ機構は容易に回避できるからです。簡単に言えば独自構成のブレーキを付ければよいのです。

 

三者はOXOもどきのサラダスピナーを半額くらいで作ってくるでしょう。そうなるとコスト競争で負けてしまう構図になります。

 

新しい付加価値を持った商品の開発が必要ですね。

 

では最後にきれいなお姉さんが解説する新型のサラダスピナーの動画をおまけに載せておきます。

OXO Salad Spinner

 

 

♡いいねはこちら

この記事が「面白かった・参考になった」と感じた方は、♡いいねを押して頂けると嬉しいです。

 この記事のツイートを♡いいねする

 

それでは今回の記事はこれでおしまい。

 

余談

実は新しいサラダスピナーで1つだけ困ったことがありました。旧型はボウル形状だったので、使わない時は他のボウルに重ねて収納できたのですが、新型は円筒ドラム形状の為、他のボウルに重ねることが出来なくなりました。

 

余分な保管スペースが必要になったのが唯一の欠点です。

 

便利でおしゃれなOXOの野菜水切りサラダスピナー

お知らせ

 

この記事はURLを変えました。

 

12秒後、新URLにリダイレクト(自動転送)されます。

 

もしリダイレクトされない場合は下のブログカードをクリック下さい。

便利でおしゃれなOXOの野菜水切りサラダスピナー - after work Lab

はじめに サラダスピナーの買い換え セール品の中身 2 pc Mini LockTop Container Set (120 ml) LockTop Container Small Square - 1.7 Cups Angled Measuring Cup - 2 Cup Little Salad & Herb Spinner なぞなぞ 新サラダスピナー サラダスピナーの特許 US6018883 …1999年2月18日出願 US7448315 …200...日出願 ♡いいねはこちら 余談 はじめに おひさしブログです。 つまらない…

ブログのカスタマイズが超快適になる方法

はじめに

 

冒頭いきなりですが、最初に少しお注意点を知らせします。

注意1

この記事はブログのカスタマイズが超簡単になる方法ではりません超快適になる方法ですのでお間違えないようお願い致します。

 

 

超快適になる方法ですが、一言でいうと「SCSS+Browsersync」の活用です。

 

実際に出来るようになった状態のスクショをお見せします。

下の画像はSCSSを保存すると自動でCSSコンパイルされ、自動でブラウザがリロードされる様子です。(画像は軽くするためGIFデータは間引いてます)

今までCSSを修正しブラウザを更新するまで最短で約30秒かかりましたが、たったの1秒以下になります。もう感激ものです。 

 

おススメの読者

この記事の方法はブログのカスタマイズ経験ゼロ&黒画面が苦手なガチな「初心者」にはハードルが高いと思います。

そのような方はあわてて自動化する必要はありません。

記事を書くことに専念し、カスタマイズに興味がで出てきたら弄ってみて下さい。

 

「ブログをもっとカスタマイズしたけどガッツリやるのは面倒くさい」と思っている「初心者」や、SCSSに興味を持っている「初心者」にはオススメです。

 

自動化できるまで少し大変ですが一度環境を作ってしまえば、超ラクチンなので後戻りできなくなるかも知れません。時間を作って是非一度お試し下さい。

 

ではここに至った背景を説明します。

 

なぜカスタマイズするのか

サイト閲覧者の利便性・操作性を向上し、かつ独自のカラーを出すことで他のブログと差別化したいからです。

 

と言うのは建前で、今のデザインに少し飽きてきたからです。

 

自分自身がメインの閲覧者なので、多少センスが悪かろうと自分好みにカスタマイズできれば、ブログを少しでも長く続けることが出来るのではと思ってます。

 

また、前々から少し気になっていたことが3つあります。

 

その1

過去このブログで「表示スピードが速いデザインとは」や「あなたのサイトは問題ゼロのRWDですか?」とか、自サイトのことは脇に置いといて偉そうに解説しました。

www.heavy-peat.com

www.heavy-peat.com

 

 

たくさんの方からお褒めの言葉を頂いたのですが、大きな改善は出来てません。

書きっぱなしで自分で実践してないと単なる評論家ですよね。

 

その2

10月29日にブログ名を「Bumble-Bee」から「after work Labo」に変更したのですがサイトのデザインは変えませんでした。

 

ブログ名変更後、時間が経つにつれ「何の為に変えたんだっけ?」「意味あったかなー?」と思うようになりました。(汗)

 

店構えや店内の調度品・メニューは全く変わらないいのに店名だけ変わるのは、やっぱり変ですよね。

 

サイトの大幅な改変ははてなブログSSL化に合わせてやればいいやと後回しにしてましたが、いつ移行するのか不明確です。

 

その3

この記事で説明する自動化は、細かい方法は違いますがすでに先人が実施済で下記サイトでやり方が公開されてます。

 

クリアメモリさん

www.clrmemory.com

 

偽名さんblog.gmork.in

 

最初先人の方法を見た時「あっ。これ素人にはムリ。Windowsで出来るかわからない」とあっさり見送りました。

Windowsで実践したはてなユーザの登場を待ちましたが、そのような記事を見つけることはできませんでした。

 

どんなデザインに変えたいのか?

シンプルでモバイルファーストなレスポンスシブデザインを目指します。トップページはカード型のカスケードレイアウトで記事は1列1カラムをイメージしてます。

 

理由はブログの閲覧は圧倒的にモバイル端末が多いからです。

 

今利用しているテーマはminimalgreen様の「Minimal Green」です。レスポンシブデザインですが2カラムなので”あトん”の理想とは一致してません。

 

1カラムへの修正は可能だと思いますが、上手く行かなかった時に作者さんに問い合わせるのは避けたいので「Minimal Green」のさらなる大改造は断念しました。

 

理想に近い投稿テーマの探索

はてなブログのテーマストア内をリサーチしてみました。

テーマ ストア - はてなブログ

はてなブログのテーマストアには241個のテーマが公開されてます。(2017年12月時点)

 

1カラムのテーマは74個で全体の約31%でした。その中でライセンス上改変できるテーマは31個で全体の約13%です。更にレスポンシブ対応のテーマに絞ると9個で全体の約4%でした。

 

最後にこの9個の中で理想に一番近いと思ったデザインは、rokuzenudonさんが公開したテーマ「Thumbnail」でした。

blog.rokuzeudon.com

 

「Thumbnail」の解説を読むと、はてなブログのカスタマイズ用テンプレート「Boilerplate」をベースに作っれたと書かれてありました。

 

「Boilerplate」とは何ぞやと思い該当サイトを見ると以下の解説がありました。

Boilerplate は、はてなブログのデザインCSSカスタマイズの土台に適したデザインテーマです。

 

はてなブログの必要最小限の見た目が調整されています。このテーマをもとにしてCSSを書くと比較的楽にデザインテーマが作れます

「オリジナルテーマの制作にチャレンジしたいけど、0から作るのが大変」という方は、このデザインテーマをもとにしてCSSを書くと比較的楽にテーマが作れます

 

楽に作れます」と2回も連呼してますね。はてながそんなにお勧めするのなら「Boilerplate」を利用する価値あるかも、と思い始めました。

 

「案ずるより産むが易し」どうせブログをカスタマイズするなら「Thumbnail」を見本にさせて頂き"あトん"のオリジナルテーマが作れちゃうかも、と考えました。

 

しかし実際は「言うは易く行うは難し」でした。。。(後半で詳細を説明します)

 

「Boilerplate」の調査

「Boilerplate」はGitHubで公開されてますが、2つバージョンがあることが分かりました。

v1:Hatena-Blog-Theme-Boilerplate-Less

「Boilerplate」のv1は2013年3月27日に公開されました。

staff.hatenablog.com

スタイルシート言語はLESSで「boilerplate.less」「_mixin.less」「_variable.less」「_media-queries.less」「_normalize.less」の5つのファイルで構成されてます。

 

v2:Hatena-Blog-Theme-Boilerplate

「Boilerplate」のv.2.0.0は2017年10月12日に公開されました。(以下v2と略します)

staff.hatenablog.com

v.2での主な変更点は「レスポンシブデザインに対応」「スタイルシート言語がLESSからSCSSに変更」「Autoprefixer対応」「Browsersyncによる自動リロードの対応」でした。

 

スタイルシートは「boilerplate.scss」「_core.scss」「_variable.scss」の3つのファイルで構成されてます。

 

では、どのバージョンの「Boilerplate」を選択すれば良いのでしょうか。

 

v1ははてなユーザの利用実績はあるようですが、v2は見かけません。

 

そもそもLESSとSCSSは何が違うのか知りません。また、Autoprefixer、Browsersync等、今まで聞いたことがない専門用語もさっぱりわかりませーん。

 

そこでザックリと調べてみました。

 

Sass(SCSS)とLESSの違い

 

「Sass」

Syntactically Awesome Stylesheetsの略で「構文的に素晴らしいスタイルシート」という意味だそうです。

 

2006年に開発されたスタイルシート言語で、記述スタイルはSASS記法SCSS記法があり、それぞれの拡張子は.sassと.scssです。

 

SASS記法セレクタやクラスの後の括弧{ }や値の後ろのセミコロン;を省略し、インデントで依存関係を示します。

 

簡略化した記述ができる為、慣れるとすごいスピードで入力できるようです。

 

「SCSS」

はSassy CSSの略で「SassのようなCSS」とでも言えばよいのでしょうか。

 

SCSS記法は括弧{}を使い入れ子構造で依存関係を示します。書き方はCSSとほとんど同じなので広く普及しておりSassの主流になっているそうです。

 

Sass≒SCSSと思ってよいのではないでしょうか。

 

「LESS」

Leaner CSSの略で「効率的なCSS」という意味だそうです。2009年に開発されたスタイルシート言語で、拡張子は.lessです。

 

「Sass」と「LESS」は変数や関数が使え「CSS」を拡張したメタ言語と呼ばれてますが、「Sass」の方がよりプログラミング言語の様相が強いようです。

 

下記サイトで記述と機能の違いが比較されているので、詳しく知りたい方はご参照ください。

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

 

"あトん"の印象ですが、「Sass」のSASS記法は1構文につき{}2文字を削減できるメリットがありますが、必ず改行しインデントで整えないと見づらくなるのがデメリットだと思いました。

 

「LESS」は「Sass」より後に開発されたのに機能が少ないのが残念だと思いました。

 

これから学習する初心者は「Sass」のSCSS記法がベターだと思います。

 

Autoprefixer

Autoprefixerを理解するにはCSSの歴史を理解しておくと分かりやすいので、CSSのレベルの進化について少し解説します。

 

CSS

CSSCascading Style Sheetsの略で1994年にホーコン・ウィウム・リーにより提唱されたそうです。

 

同年ティム・バーナーズ・リーによりW3CWorld Wide Web Consortium)が設立され、1996年にCSS1.0、1998年にCSS2.0が勧告されました。

 

Windows95が発売されたのは1995年ですが、1996年のIE3よりCSS1.0がサポートされてます。

 

CSSの策定プロセスは、FPWD(初期草案)→WD(草案)→ LC(最終草案)→ CR(勧告候補)→ PR(勧告案)→ REC(勧告)の6段階になってますが、CSS2.0の改定版のCSS2.1が勧告されたのは何と13年後の2011年です。

 

現在CSSはモジュール毎に仕様が策定されている為「CSS3」という標準自体は存在しません。

 

CSS2.1を拡張したレベル3を総称して「CSS3」と呼んでいるそうです。「CSS4」も同じ考え方です。

 

各モジュールのレベルとプロセスの進捗は下記サイトで確認できますので、気になる方は覗いてみてください。

www.w3.org

 

Autoprefixerとは

モジュール毎にレベルや策定プロセスの進捗がバラバラだと、ブラウザの種類やバージョンによって対応済のものと未対応のものが出てきます。

 

これらをCSSで細かく定義・修正するのはとても大変な作業ですが「Autoprefixer」を使うとベンダープレフィックスを適切に自動で付与することができます。

www.npmjs.com

「Autoprefixer」はまだ使ったことがありませんが、大変便利なツールだということが分かりました。

 

Browsersyncとは

「Browsersync」はファイルの変更を監視し、変更を検知すると自動で複数のブラウザのリロードを行ってくれるツールです。

 

例えば、スタイルシートを編集・更新すると、PCとiPhoneのブラウザの両方が同時に自動更新されます。

 

また、PCのブラウザを操作しスクロールさせると、iPhoneのブラウザも同期してスクロースします。その逆も出来ます。

 

面白くて大変便利そうですね。

www.npmjs.com

 

百聞は一見にしかず「Browsersync」の凄さが分かる動画を貼っておくのでまず見て下さい。

cssを変更したら自動でリロードしてくれるBrowsersyncが超便利!

 

この動画ではBrowsersyncの話は3:10以降に登場します。

Cross Device Testing, Totally Tooling Tips (S2 Ep6)

 

どうです、凄いですよね。えっ!Webデザイナーは当たり前に使っているよ、と言う声が聞こえてきますが、はてなブログでこれが使えたらどうなるのでしょうか。

 

「Browsersync」を使用すると、はてなブログでは①~⑦の作業をすべて廃止でき、作業が30倍速くなります。

 

CSS修正→①管理画面に入る→②デザインを選択→③カスタマイズを選択→④デザインCSSを選択→⑤修正したCSSをコピペ→⑥変更を保存→⑦ブラウザを更新


前半のまとめ

Boilerplateのv1とv2を比較した結果、以下の理由でv2を使ってカスタマイズすることに決めました。

 

スタイルシートの変更を検知し自動リロードしてくれる「Browsersync」はメチャ便利そう。

しかも、複数のデバイス(PCの複数ブラウザ、スマホのブラウザ)が同期するのでモバイルのテストも同時にでき凄い!
・プログラムライクなことは苦手ではないので「LESS」より「SCSS」の方が使い勝手が良さそう。
・Autoprefixerはあると便利そう。
・レスポンシブ対応はうれしい。
・normalize.cssはv1はv3.0.1だがv2は常に最新バージョンが読み込まれる。※

※normalize.cssは使わない不要な部分もありますが、ド素人が勝手に削除するのは時期尚早なので、内容が理解できてからコンパクト化を考えます。

 

それでは長い後半です。「Boilerplate」のv.2.0.0の動かし方について解説します。

 

「Boilerplate」v.2の動かし方

まず後半の注意事項です。

 

注意2

無知なまま適当に作業したので、途中何度も上手く行かなくなり泣きそうになりました。

 

無謀な初心者が同じような落とし穴に落ちないよう、失敗した内容と対策の内容を隠すことなく書きました。

 

その為、後半の記事は前半の3倍あります。

 

ご存じの項目があれば、遠慮なく飛ばし読みして下さい。

 

また、じっくり読む時間が無い方は、とりあえずブックマークしておいて、後で読むことをオススメします。

 

なお、最終的にはてなが説明した方法では動かなかったので、自己流で動かした方法を説明します。

 

はてなには質問を投げてますが、回答が来たら答え合わせしたいと思います。

 

セットアップ方法

BoilerplateテーマはGitHubの下記サイトで公開されてます。

github.com

 

セットアップの方法はREADME.mdに書かれてました。

SCSSで開発する場合は、下記の手順でリポジトリのcloneとモジュールのインストールを行います。

 

リポジトリのcloneとは何のことかよくわかりませんが、Node.jsというJavaScriptをインストールし、意味不明の呪文を3行入力すれば良いと勝手に解釈しました。 

 

しかし、分からないことはしっかり調べてからやるべきでした。(反省)

 

Node.jsのインストール

下記サイトでインストーラをダウンロードします。

https://nodejs.org/en/

LTSバージョンをダウンロード 

※ すべて上手く行った後、Currentバージョンも試しましたが、”あトん”の環境ではnpm start後エラーが発生し動きませんでした。

インストーラを起動し次にすすみます

ライセンスは一応読んだことにして次にすすみます

インストールするフォルダを決定します

デフォルトのままで次に進みます

インストールを実行します

インストール中(数分)

無事完了しました

 

バージョンの確認

Windowsコマンドプロンプトで下記コマンドを実行し、node.jsとnpmのバージョンを確認します。

node --version
npm --version

 

nodeはv8.9.3、npmはv5.5.1であることが確認できました。

 

もしコマンドプロンプトの使い方が分からない方は下記記事を参考にして下さい。

www.heavy-peat.com

 

と、順調に出来たのではここまでで、次から気の遠くなるような苦難の連続でした。

 

失敗1:「Git」が動かない

次にモジュールをインストールする為コマンドプロンプトで呪文を入力したのですが「git」のコマンドを認識してくれませんでした。

git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git

 

node.jsを入れただけではダメなようです。

そう言えば「Git」「リポジトリ」「clone」が何のことか理解してませんでした。

 

ネットで調べてみると下記サイトを見つけました。

www.backlog.jp

一通り流し読みしましたが、入門編でお腹いっぱいになりました。”あトん”はサルより頭が足りないことが分かりました理解したことをまとめてみます。

 

Git

Gitはプログラムソースなどの変更履歴を管理する分散型のバージョン管理システムのことで、Linuxの開発で利用されこれが世界中に広まったものでした。

 

リポジトリ

リポジトリはデータやファイル及び過去の変更履歴が貯蔵された場所でした。

 

clone

cloneはcopyと何が違うのか今ひとつピンときませんが、今回の場合「リポジトリ」のデータをまるごとローカルに保存することのようです。

 

対策1:「Git」のインストール

gitを実行するには「Git」をインストールする必要があるのでさっそくやってみます。ダウンローダは下記サイトにあります。

https://git-scm.com/

 

画面右下のDownloadsをクリックします

 

ライセンスを一応読んだことにして次にすすみます

インストールするフォルダを決めます

必要なコンポーネントを選択します

スタートメニュフォルダの選択

そのまま次にすすみます

コミットメントの編集エディタの選択

後で変更出来るので、デフォルトのままですすめます

環境変数のパス

本例ではコマンドプロンプトを使用するので2番目を選択

コンソールの設定

Windowsのデフォルトコンソールを選択

HTTPS通信のルート

個人使用なのでOpenSSLを選択

改行コードの設定

何もつかないas-isを選択します

Configの設定

とりあえず全部にチェックを入れインストールします

インストール中

セットアップの終了

以上でGitのインストールは終了です。

 

失敗2:コマンドが通らない

それではコマンドプロンプトで呪文を入力します。

git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git

えっ!上手く実行できません。コマンドプロンプトだからダメなのかな?

今度はGit Bashのコンソールで試してみます。

Git Bashのコンソールでコマンドを実行してもダメなようです。

 

エラー内容を見ると、RSA keyの認証でホストキーの確認に失敗しているようです。

 

GitのChapters「.3 Git サーバー - SSH 公開鍵の作成」を読むと「Git サーバーはSSHの公開鍵認証を使用しておりユーザは自分の公開鍵を作成しなければならない」と書かれてました。

 

.sshというディレクトリに鍵が保存されるらしいのですが、確認すると空でした。

cd .ssh
ls

 

GitHubは安全にリポジトリする為、高度なセキュリティを使っているようですが、ド素人にはチンプンカンプンです。

 

公開鍵はどの様な方法で作成・登録するのでしょうか。。。?

 

焦っていろいろと調べていたら、そもそもGitHubにアカンウトを登録してないことに気づきました。(汗)

 

対策2:GitHubのアカント登録

下記サイトの手順を参考に”あトん”のアカウントを登録しました。

qiita.com

 

 アカウントの登録は下記サイトで行います。

github.com

 

GitHubへの登録

 「Username」「Email」「Password」を入力し「Sign up for GitHub」をクリックします

 なお「Username」は登録後でも変更できます。

 

free planのまま「Continue」を選択

アンケートに答えて「Submit」を選択

アンケートは答えたくなければスキップできます。

Start a projectを選択

登録したメールアドレスを確認

メールの確認

「Verify email address」をクリックします

登録完了の確認

Thanks for verifying your email addressのメールが来たら登録完了です。

以上でGitHubへのアカウント登録は終了です。

 

個人識別情報の登録

GitのChapters「.5 使い始める - 最初のGitの構成」を読むと以下が記載されてます。

Gitをインストールしたときに最初にすべきことは、ユーザー名とEmailアドレスを設定することです。

 

さっそく、Git bashを起動し登録します。

 

登録方法の詳細はGitHub Helpの「Set Up Git」にも記載されてます。

 

ユーザー名とEmailアドレスの登録

下記呪文を入力します。

git config --global user.name "your-name"
git config --global user.email "your.email@example.com"

登録情報の確認方法

下の呪文を入力すると登録情報が表示されます。

git config --global --list

 

SSH鍵の作成

リポジトリをcloneするにはSSHの公開鍵で認証を行うので、公開鍵を作製する必要があります。

 

SSH鍵の作り方はGitHub Help「Generating a new SSH key and adding it to the ssh-agent」に書かれてますので、その中の説明に従って作成します。

 

SSH鍵作製のコマンド

Git bashを起動し下記呪文を実行します。

”your.email@example.com”は前に登録したEmailアドレスです。

ssh-keygen -t rsa -b 4096 -C "your.email@example.com"

パスフレーズを聞いてきますが今回はスルーします。

.sshのフォルダ内に秘密鍵:id_rsaと公開鍵:id_rsa.pubのファイルが作成されました。

 

公開鍵の登録

GitHubのマイページに公開鍵を登録し、秘密鍵で認証できるようにします。

 

公開鍵のコピー

公開鍵の内容をクリップボードにコピーします。

 

公開鍵のコピーはGitHub Help「Adding a new SSH key to your GitHub account」に書かれてます。

 

Git Bashで呪文を実行すると、公開鍵:id_rsa.pubがクリップボードにコピーされます。

clip < ~/.ssh/id_rsa.pub

 なお、テキストエディタでid_rsa.pubを開き公開鍵をコピーしてもOKです。

 

GitHubSign inします

「Settings」を選択

SSH and GPG keys」を選択

「New SSH Key」を選択

Tittleを入れ、Keyをペーストし「Add SSH key」を選択

SHH keyの登録完了

登録完了のメールが届きます

 

モジュールのインストール

さて、やっとリポジトリのcloneができる準備が整いました。

 

リポジトリのclone

さっそく、コンソール画面で呪文を実行します。 

git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git

今度は上手くいきました。

 

npmのインストール

ディレクトリを「Hatena-Blog-Theme-Boilerplate」にチェンジし、npmをインストールする呪文を入力します。

cd Hatena-Blog-Theme-Boilerplate
npm install

 

コマンドを実行するとnpmのインストールが始まりました。

 

3つワーニングが出てますがエラーはなく、約4分で無事npmのインストールが終わりました。

 

テストサイトの構築

いよいよ作業も大詰めです。

 

テストサイトの準備

本番環境での実行はおススメしません。バックアップをとっていたとしても閲覧者に迷惑がかかる恐れがあります。

 

無料ユーザは3サイト、Proは10サイト登録できますので、テストサイトを1つ用意して下さい。(ローカル環境で実行するので非公開で大丈夫です)

 

ローカルホストの登録

テストサイトが用意できたら、コンパイルされたcssをローカル環境で読み込み自動リロードさせる為、下記をヘッダのタイトル下の欄に貼付けます。

<link rel="stylesheet" href="http://localhost:3000/boilerplate.css"/>
<script async src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>

 

ブログの「管理画面」→「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にコピペします。

 

SCSSファイル変更の監視とコンパイル

npm startを実行します。

npm start

 

特にエラーも発生せずscssファイルがコンパイルされboilerplate.cssが作製されました。続けてscssファイルの監視がスタートします。監視を停止する場合は「Ctrl」+「C」を押します。

 

テストサイトを開くと「Browsersync」によりboilerplate.cssが自動リロードされました。

無事出来たようです。よかったー!

 

いよいよ最後はscssファイル修正後の自動更新です。

 

background(背景)の色を変更し保存してみます。

・・・

 

・・・

 

・・・

 

うっ!何も変わらない。えー、どうして変わってくれないの?

 

一度npmを停止し再スタートとコンパイル後背景はグレーに変わりました。

しかし、何度scssファイルを修正・保存しても自動リロードされません。

 

「えー、マジ・・・」どこでつまづいているのかド素人にはわかりません。急がば回れで、OS・ブラウザの種類バージョンとスクショを送って、はてなサポート窓口に調査をお願いしました。

 

じっと待っていてもしょうがないので、別の方法がないか探すことにしました。

 

原因調査

どこまで上手く行っているのか再度確認してみました。

 

npm実行後、無理やりboilerplate.cssを直接書き換えると自動リロードされデザインは変わりました。

 

どうやら「Browsersync」君は真面目に仕事をしてますが「npm」君は最初仕事をしたらすぐ持ち場を離れ「scss」君の面倒を放棄しているようです。

(ちょっと酔っぱらっているので勝手に君付けしてます。すみません。)

 

不真面目な「npm」君に変わって、別の人が「scss」君の面倒を見れば上手く行くのでは、と思いました。

 

暫定対応

冗談はここまでにして、scssファイルの変更を監視し自動コンパイルできれ良いはずです。

 

sassを監視し自動コンパイルできるツールを探したところ「Koala」「Prepros」が使い易そうでした。

 

Koala

下記サイトからダウンロードできます。

koala-app.com

詳しい使用方法は下記サイトを参照ください。

uxmilk.jp

 

やって見ると、コンパイルしたいファイルがあるフォルダをドラックするだけで簡単でした。

 

但し、boilerplate.scssに記述されているインポートファイルの一部が読み込めずエラーになったので、下記のように修正しました。

変更前:
@import "node_modules/normalize.css/normalize";

変更後:
@import "node_modules/normalize.css";

 

操作中の様子をGIF画像に収めたので見て下さい。

 

Prepros

PreprosはKoalaより機能が豊富で一番使い易いと言われているようです。

 

下記サイトからダウンロードできます。

Compile Sass, Less, Jade, CoffeeScript on Mac, Windows & Linux with Live Browser Reload

使用法は割愛します。詳しくは下記サイトをご参照下さい。

rfs.jp

 

PreprosもKoalaと同様にコンパイルしたいファイルがあるフォルダをドラックするだけで設定は簡単でした。

 

なおKoalaでエラーになった現象はこちらでも出たので、同じ対応を行いました。

 

操作中の様子をGIF画像に収めたので見て下さい。

 

KoalaとPreprosで遊んでいるうち一週間が過ぎましたが、やっとはてなサポート窓口から回答が来ました。

 

「ただいま確認を行っておりますので、今しばらくお待ちいただけますでしょうか。」と残念な回答でしたが、一応メールは見てくれたようです。

 

年度末で忙しいとは思ましたが、とりあえず催促の返事を出しました。

 

そうこうしている間に、何と勝間和代さんがはてなブログにデビューされたのですが、こっちが気になり、2つもブログを書いてしまいました。(笑)

 

そして気が付くと2週間が過ぎましたが、はてなからは何の連絡もありません。

 

KoalaやPreprosを併用するのは本来の方法ではないので、Node.jsとnpmのみで何とか動かしたいです。

 

のんびり屋の”あトん”も少しイラットしてきたのですが、npmが読み込んでいるジェイソン君のパッケージ(package.json)に何か手がかりがないか調べてみることにしました。

jsonファイルは嫌いにならないよう親愛を込めてジェイソン君と呼んでます)

{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css --map true",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar 'scss/' -c 'npm run build'"
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"browser-sync": "^2.18.13",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.5.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}

 

scssの監視は"watch": "chokidar 'scss/' -c 'npm run build'"で定義されており、chokidarというコマンドで監視していることは分かったのですが、なぜこの呪文が上手く実行されないのかがわかりません。

 

いろいろ弄って数日過ぎたある日、老眼で気が付かなかったのですがnpm実行中のコンソール画面で少しおかしいところを発見しました。

 

scssをwatchしている行を見たところ、’(シングルクウォート)が変な位置に入っているのです。

 

 

ここが怪しいと思いネットでいろいろ検索した結果、有効な解決策をやっと見つけることができました。

qiita.com

 

何とWindowsではシングルクウォートが無視されるそうです。(涙)

 

解決策はシングルクォートをエスケープしたダブルクォートに変更するものでした。

修正前:
 "watch": "chokidar 'scss/' -c 'npm run build'"

修正後:
"watch": "chokidar \"scss/\" -c \"npm run build\""

 

修正後はscssファイルの監視が上手く行きました。

 

但し、1つ問題が出ました。自動リロードのレスポンスが悪いのです。

 

原因はscssファイル修正後、npm run buildを一から再実行するので3~4秒更新が遅くなるようです。

 

高性能のPCであれば瞬時に変わるのかも知れませんが、”あトん”のノートPCは2009年製でvistaを強引にwindows10に変更した老朽化PCです。

 

しかたがないのでスピードアップの為、scssの自動コンパイルだけを実行するようにwartchを修正しました。

修正後:
"watch": "chokidar \"scss/\" -c \"npm run build\""

再修正後:
"watch": "chokidar \"scss/\" -c \"node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4\""

 

修正後はサクサクと動くようになりました。

 

まとめ

時系列にだらだと説明しましたが、ド素人がやる場合の作業は以下です。

①Node.jsをインストール
GitHubへ登録
③Gitをインストール
④Git bashで個人識別情報の登録
SSH鍵を作製
⑥公開鍵の登録
リポジトリのclone
⑧npmのインストール
⑨テストサイトを用意
⑩ローカルホストの登録
⑪npmの実行 ※

①~⑩は一度設定すれば以後必要ありません。

Windowsはpackage.jsonwatch行のシングルクォートをエスケープしたダブルクォートに変更

 

その他

スマホがテストサイトを認識できない場合は、下記記事を参考に設定を見直して下さい。

www.koreyome.com

 

gitを独学したい素人は下記サイトで紹介されている「git-it-electron 実践入門」を一読することをおススメします。("あトん"は半分も理解できませんでしたが。。。)qiita.com

 

余談

ブログのカスタマイズは自動化できる目途が経ちましたが、SCSSについては、まだ勉強してません。使いこなせるようになるまで時間がかかると思いますが、マイペースで勉強していきたいと思います。

 

”あトん”オリジナルのテーマを公開できるのは、まだまだ先になると思いますが、ダークなサイトにしようと思ってます。

 

それでは、良い新年が迎えられることをお祈りしてます。

最後までお付き合い頂き、ありがとうございました。

 

はてなはいつ質問に回答してくれるのかなー?

年内に回答が来なかったら、自己解決できたと言った方がいいのかな。

 

2017/12/29 追記

はてなサポート窓口からやっと下記回答が来ました。

Boilerplate そのものに関する不具合ではなく、使い方に関するご質問でした。

恐れ入りますが、使い方についてはサポート対象外となっております。

回答が遅くなりました上、お力になれず申し訳ございません。

下記は外部サイトですが、ご参考になさっていただけますでしょうか。 

qiita.com

 

動かなかった原因は合っていたので安心したのですが、Windowsで動かなければ不具合だと思うのですが。。。

 

少し納得がいかない回答だと感じました。

 

2018/01/05 追記

README.mdに以下が追記されてました。

Boilerplateは自己責任でご利用ください。お問い合わせははてなブログのサポートフォームではなく、本リポジトリのIssueにお願いします。

 

これって”あトん”に対して遠回しに言っているのかな?

 

こんな追記より、Windows用のpackage.jsonをアナウンスすべきだと思うのですが。

オリジナルテーマを作ろうと思っていたモチベーションが思いっきり下がりました。

 

2018/01/06 追記

rokuzenudonさんがはてなブログテーマ「 UnderShirt 」を公開されました。

blog.rokuzeudon.com

 

新しい公式 Boilerplateを試したとのことですが、SCSS、browser-syncは特に気にならず楽に使えたとのコメントされてました。Macだとすんなり動くんですね。

 

「 UnderShirt 」は2カラムですが非常にシンプルで見やすいデザインです。さすがWebデザイナーさんだけあって隅々まで仕上げもすばらしい。。。

 

またクセがなく無難でカスタマイズしやすい仕様になっているとのことなので初心者にもオススメですね。

 

2018/1/17 追記

12/29に「修正方法について、記載を検討させていただきます。」とはてなより回答をもらってましたが、1/10にREADME.mdにWindows環境での開発案内がアップデートされてました

github.com

 はてなさん、フォローありがとうございます!

ところで、SSL化はとても遅れているようですが、第ニステップの実施は遅くともChrome66がリリースされる春迄にお願いいたしまーす。

 

2018年7月8日追記

npmを使う場合は最新バージョンを確認してください。

 

node.jsは8.9.3 LTSが8.11.3 LTSにバージョンアップされてます。
またnpmは6.1.0にupdateしないと動きません。

 

更にHatena-Blog-Theme-Boilerplateのpackage.jsonに記述されている
npmのパッケージはバージョンが古いので、
定期的に最新バージョンに修正することをおススメします

 

特にnormalize.cssは古いブラウザをサポートする必要が無くなりv7.0.0は2.3KBだったのがv8.0.0で1.8KBに軽量化されてます

Hatena-Blog-Theme-Boilerplateのpackage.json

変更前:

{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"npm run build\""
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"browser-sync": "^2.18.13",
"chokidar-cli": "^1.2.0",
"node-sass": "^4.5.3",
"normalize.css": "^7.0.0",
"npm-run-all": "^4.1.1",
"postcss-cli": "^4.1.1"
}
}

 

変更後:(2018/07/08時点のバージョン)

{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"npm run build\""
},
 "devDependencies": {
"autoprefixer": "^
9.0.1",
"browser-sync": "^
2.24.5",
"chokidar-cli": "^1.2.0",
"node-sass": "^
4.9.2",
"normalize.css": "^
8.0.0",
"npm-run-all": "^
4.1.3",
"postcss-cli": "^
6.0.0"
}
}

 

修正後Windows用"あトん"バージョン

watch行のシングルクォートをエスケープしたダブルクォートに変更し、コンパイルを一部スキップし高速化してます。

{
"name": "hatena-blog-theme-boilerplate",
"version": "2.0.0",
"description": "Boilerplate for Hatena Blog theme",
"author": "Hatena Blog",
"license": "MIT",
"scripts": {
"prestart": "npm run build",
"start": "npm-run-all -p watch server",
"build": "npm-run-all scss autoprefixer",
"scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
"autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
"server": "browser-sync start -c bs-config.js",
"watch": "chokidar \"scss/\" -c \"node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4\""
},
 "devDependencies": {
"autoprefixer": "^
9.0.1",
"browser-sync": "^
2.24.5",
"chokidar-cli": "^1.2.0",
"node-sass": "^
4.9.2",
"normalize.css": "^
8.0.0",
"npm-run-all": "^
4.1.3",
"postcss-cli": "^
6.0.0"
}
}

 

DMCA.com Protection Status