2020年9月24日 MEMO 0
軽量でシンプルなcssのレスポンシブでグリッド部分を探している、@ひかげです。
Bootstrap（ブートストラップ）ほど多機能ではなく、リセットcss（もしくはノーマライズcss）に、ボタンデザインやグリッドシムテムと最低限のcssで、個人的にミニマムな軽量レスポンシブWebデザインを目指してみます。
Simple Gridのグリッドシステム
今回は、軽量で使い勝手の良さそうなcssフレームワークの「Simple Grid」から「GRID SYSTEM」のみを抜き出しします。
グリッドシステムのCSSコード
およそ、1.5kbのcssです。
/* ==== GRID SYSTEM ==== */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 0.5rem 2%;
min-height: 0.125rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 96%;
}
.col-1-sm {
width: 4.33%;
}
.col-2-sm {
width: 12.66%;
}
.col-3-sm {
width: 21%;
}
.col-4-sm {
width: 29.33%;
}
.col-5-sm {
width: 37.66%;
}
.col-6-sm {
width: 46%;
}
.col-7-sm {
width: 54.33%;
}
.col-8-sm {
width: 62.66%;
}
.col-9-sm {
width: 71%;
}
.col-10-sm {
width: 79.33%;
}
.col-11-sm {
width: 87.66%;
}
.col-12-sm {
width: 96%;
}
.row::after {
content: "";
display: table;
clear: both;
}
.hidden-sm {
display: none;
}
@media only screen and (min-width: 33.75em) { /* 540px */
.container {
width: 80%;
}
}
@media only screen and (min-width: 45em) { /* 720px */
.col-1 {
width: 4.33%;
}
.col-2 {
width: 12.66%;
}
.col-3 {
width: 21%;
}
.col-4 {
width: 29.33%;
}
.col-5 {
width: 37.66%;
}
.col-6 {
width: 46%;
}
.col-7 {
width: 54.33%;
}
.col-8 {
width: 62.66%;
}
.col-9 {
width: 71%;
}
.col-10 {
width: 79.33%;
}
.col-11 {
width: 87.66%;
}
.col-12 {
width: 96%;
}
.hidden-sm {
display: block;
}
}
@media only screen and (min-width: 60em) { /* 960px */
.container {
width: 75%;
max-width: 60rem;
}
}
グリッドシステムの使い方
公式サイトの中ほどに「Simple Code」の記載があります。
使いやすい12分割なので、簡単に使用できます。
Simple Gridの補足
Simple Gridをフル活用の場合には「ROOT FONT STYLES」に、*（アスタリスク）の指定があるので、少し使い勝手が悪いかもしれません。（html,bodyへ*の内容を記述してROOT FONT STYLESを削除するなど）
ブレイクポイントも、720pxなので、iPadでも使いやすいように修正すると、1カラム表示ができます。
@media only screen and (min-width: 45em) { /* 720px */ を @media only screen and (min-width:769px) { に修正。
おわりに
基本的な大枠は「.col-8」と「.col-4」の2カラムで実現できるので、必要なところだけチョイスすると更に軽量化できますね。
2020年6月29日 MEMO 0
最近は静的サイトジェネレーターで遊んでいる、@ひかげです。
WordPressもバージョンアップ、サーバーのPHPのバージョンアップなど、サイトを運用するために管理もあります。
WordPressの動作要件も、PHP バージョン7.4以上、MySQL バージョン5.6または MariaDB バージョン10.1以上のサーバーを推奨なので、場合によってはサーバー移行などが必要になります。
静的サイトだと、生成されるのは昔ながらのHTMLファイルなので、データベースやPHPは不要のApache または Nginxで利用できます。（日本語のファイル名やディレクトリ名に対応したサーバーだとストレスは少ない）
静的ページのデメリット
昔ながらのHTMLと同じなので、WordPressのような動的な性質と異なります。
- リアルタイムな情報を反映させにくい（更新やビルドはパソコン作業が中心）
- お問い合わせフォームやサイト内検索の導入が面倒
- コメント機能も無いので、インタラクティブ(双方向性)が弱すぎる
使ってみた静的サイトジェネレーター
制作環境は、パソコン: ThinkPad X230(Lenovo)、OS: xubuntu 18.04.4 LTS (Bionic Beaver)にて。
基本的にマークダウン記法が使えるので、WordPressよりも記事が書きやすい。
公開中のサイト
静的サイトジェネレーターでビルドしたものを公開中。
静的サイトジェネレーターの使用感
仕様や使いやすさは、静的サイトジェネレーターによって違いがあります。
- Hugo
- 柔軟で初心者にも使いやすい印象。ビルド生成も速く、日本語情報も多いのでオススメ。学習コストは低め。（日本語のファイル名やディレクトリ名に対応したサーバーが吉）
- Zola
- xubuntuからインストールも簡単だったので、なんとなく使ってみたところ、ビルドも速めでシンプルな感じが扱いやすい。日本語情報が非常に少なく、Hugoと比べると機能は少ない印象。学習コストは低め。個人的には割と好きなタイプ。（rust-unidecodeによる英語スラッグへ自動変換されるので、どのサーバーでも使いやすい）
- GatsbyJS
- 初心者にはハードルが高い印象。書籍も購入してみたところ、導入やインストールの時点でつまづく。日本語情報は多いが学習不足により挫折気味。スターターテーマで低機能だと短時間で公開まではできる。ビルドは遅め。（サーバー条件は未調査。たぶんHugoと同じような気がする）
おわりに
動的なWordPressや静的サイトジェネレーターには、それぞれの良さがあります。
結局は、目的と使い方次第なので、サブドメインやサブディレクトリで新たに運用していく考え方もありますね。
2020年2月29日 MEMO 0
ダイソーで購入した「たっぷり消しゴム」でシャーペン用のペン枕を自作してみた、@ひかげです。
カットや切れ込みが簡単で、適度なサイズとコスパも良い商品です。
ペン枕は、ペンレスト・ペン置きとも呼ばれます。
自作のペン枕について
箸置きで代用しているパターンも多いペン枕ですが、筆記用具を撮影する時の角度調整と滑り止め効果の高い消しゴムなら、カッターの切れ込み2ヶ所だけでペン枕が自作できます。
V字の切れ込みは、幅6mm以下、深さ3-5mmくらいが良いと思います。
幅と深さを小さくしておくことで、シャーペンに噛み込んで、ペン枕ごと持ち上がってしまう現象を防止します。
転がり防止にもお役立てください。
2020年1月16日 MEMO 0
前回に続き、文具好きな@ひかげです。
シャーペンの滑り止め デルガード編
クルトガも筆記の時に手汗でシャープペンシルが滑るので、熱収縮チューブでシャーペンの滑り止めをしてみました。
クルトガ 0.3 のラインナップには、ラバーグリップが付いていないので、今回は熱収縮チューブ（透明）でシャープペンシルの滑り止め工作をしました。
シャーペン滑り止めの工作 クルトガ 0.3
準備するもの
- クルトガ
- ELPA 収縮チューブ PH-640H（購入時:税込 188円）
- はさみ
- ライター（ドライヤーよりもライターで炙ると早い）
今回のクルトガ 0.3だと、収縮チューブを 3cm でカット。
クルトガの滑り止め加工完了
熱収縮チューブは、滑り止め効果が少し弱く感じます。
収縮チューブ（透明）だと、加工もカンタンでクルトガマークの回転も見えるので、仕上がりはキレイにできます。
感覚で言えば、ジェットストリームのラバーグリップ平面の部分よりも抵抗は弱いです。
もう少し補足すると、タプリクリップ（シャーペン）、オ・レーヌ シールドのラバーグリップよりも抵抗は弱いです。
滑り止め効果で強めの抵抗を期待するなら、ブチルテープ（自己融着テープ）を巻くと、ジェットストリームのラバーグリップに近い感じです。
おわりに
滑り止め対策で、プニュグリップやソフトグリップも市販されていますが、軸径が太くなるので薄く抵抗のある素材を使って工作しました。
今回は、ラバーグリップの無いクルトガにシャーペンの滑り止めとして、熱収縮チューブを取り付けてみました。
今のところ、ブチルテープか収縮チューブならホームセンターでも購入ができ、カンタンに工作ができますね。
2020年1月14日 MEMO 0
意外と文具好きな、@ひかげです。
筆記の時に手汗でシャープペンシルが滑るので、シャーペンの滑り止めをしてみました。
鉛筆の滑り止めにも有効なはずです。
今回は、人気のあるデルガード(0.3、P-MAS85-BL、購入時:495円)で滑り止めの工作をしてみます。
シャーペン滑り止めの工作 デルガード 0.3
準備するもの
- デルガード 0.3(P-MAS85-BL)
- ニトムズ 自己融着テープ（ブチルテープ、購入時:395円）
ハサミで、事前にカットしておく・端をカットして整形に使うことがあるかもしれません。（テープは引きちぎれます）
シャーペン滑り止め加工完了
ビニールテープだとベタつくことが多いので、自己融着テープ（ブチルテープ）を巻くことで、グリップ力を高めて、厚みの調整（握りやすさ）をします。
自己融着テープは、ビニールテープのように粘着剤を使っていないので、テープを引っ張りながらテープを巻いていきます。半分くらい重なるようにしてください。
注意点：一度融着させたテープの再利用は出来ません。
ブチルテープを巻いたデルガードは レベルが あがった！！
- 書きやすさが 3ポイント あがった！
- 手汗で滑りにくさが 20ポイント あがった！
- うれしさが 爆あがった！
おわりに
ラバーグリップの無いシャーペンの滑り止めに自己融着テープは便利です。
自己融着テープは、「ブチルテープ」と呼ぶ方が一般的かもしれません。
たとえば、ドラムのスティックやゴルフクラブ・テニスのラケット・野球道具のバットなどにも応用ができると思います。
電機関係の職種では絶縁で使うことが多いので自己融着テープは必要ですが、セロテープみたいに日常で使うようなテープでは無いので、一般向けには馴染みが薄いと思います。
今回は、ラバーグリップの無いデルガードにシャーペンの滑り止めとして巻いてみました。
手汗による筆記用具の滑り止めにお試しあれ！
追記
注意点として、筆箱やペンケースの中に、ブチルテープを巻いた複数のシャーペンを入れておくと、シャーペン同士がくっついて、勝手に自己融着されることがあります！
紙キャップを被せてると幸せになれると思います！
2019年12月28日 MEMO 0
ローマ字入力を前提にキーボードの文字消えを補修してみた、@ひかげです。
身近なもので、かんたんにキーボードの文字消えを補修しようと思ったときに、ダイソーのタックシールをカットして貼り付けました。
タックシールは種類が多いので、大きさ・カットしやすいものを購入すると良いかもしれません。
キーボード文字で印刷イメージの元ネタは、MacBook Pro 2011に装着しているサンワサプライ MacBookPro用シリコンキーボードカバー ブラック FA-MAC1BKです。
キーボードの文字消え補修 カシオ ネームランド KL-H75
タックシールへ手書きのアナログよりも、ワンランク上の補修。
何かと便利なカシオ ネームランド KL-H75（しまえるBOX付き）を7000円くらいで購入していました。
おためし用に同梱されていたテープ（カートリッジ）は、9mm幅なので、キーボードサイズより小さいので、12mmを購入しました。
黒地の白文字テープは家電量販店・文具屋さんを3店舗回って、どのサイズも置いていなかったので、妥協して白地の黒文字テープでキーボード文字消え補修の再チャレンジ。
現在はダイソーで販売終了しているシリコン製のキーボードカバー（14インチ）を装着して完了。
おわりに
キーボード文字消えの補修は、タックシールだと簡単に対応できる。（見栄えは悪い）
ネームランドやテプラだと、12mmテープが無難。
ネームランドでキーボードの印刷をするときのコツは、1文字ごとに空白を入れると、キーボードの形状に合わせて自由なカットできる。
※1文字ごとに印刷とカットでも良いが、機種・モデルによっては余白が無駄になることがある。
家電量販店には、黒地の白文字テープを置いていないことが多く、価格帯は990円前後。
2019年12月現在
カシオ ラベルライター ネームランド テープ 12mm XR-12ABK 黒 白文字
販売価格: 税込 1155円（1050円 税抜）
12mm XR-12ABK
補修のシールを貼り付けたあとは、エレコムのピタッとシート、キーボードのシリコンカバーを装着しておくと幸せになれるかもしれません。
2019年12月26日 MEMO 0
年末の掃除をしていると、10年前に購入したネットブックが出てきたので、軽量なLinuxを入れて遊んでみようと思った、@ひかげです。
いまさらながらDELL Inspiron Mini 10
DELL Inspiron Mini 10 到着です。
Crucial m4 64GBを最新ファームウェアにした
購入から、ほとんど使っていないSSD（Crucial m4 64GB、使用時間 100時間未満くらい？）をDELL Inspiron Mini 10に換装。
32bit、Atom Z520（1.3GHz）、メモリ1GBの低スペックすぎる仕様。
Linuxの候補と模索と試用
32bitの条件で軽量Linuxを調査。
- Basix 4.0（32bit、断念）
- Q4OS 3.9（32bit、断念）
- Peppermint 10（32bit、保留）
- xubuntu 18.04.3 LTS（32bit、保留）
- Linux Mint 19.3 Tricia（32bit、保留）
Basix 4.0、Q4OS 3.9はお試しができなかったので断念。
Peppermint 10だと、標準で無線LANが認識した。
xubuntu 18.04.3 LTS、Linux Mint 19.3 Triciaは、標準で無線LANが認識しない。
今回は、LibreOfficeがプリインストールされていたので、Linux Mint 19.3 Triciaをチョイス。
Linux Mint 19.3 Tricia
有線LAN環境ではないので、WLI-UC-GNM（無線LAN子機）を差し込んでみると認識で使えることが判明。
その後、DELL Inspiron Mini 10で内臓のWifiを使えるようにする。
sudo apt-get install
firmware-b43-installer
※表示に従って、確認のときに「Y」でインストール続行。
・再起動後に、内臓Wi-fiが認識される。
セットアップ
非力なネットブックなので、ここから3時間くらい必要。
お決まりのアップデートとアップグレード、日本語環境の設定だけでも、ダウンロードで約1GBくらい。
1コアCPUで100%が続くので、辛抱。
やがて、なんとかインストールと環境が整う。
おわりに
DELL Inspiron Mini 10にLinux Mint 19.3 Tricia（32bit）をインストールすれば、使えることは使えるけれど、ブラウザ、MousePadなどのソフト・アプリは、ワンクッション遅い感じで起動するので、サクサクとは言い難い。
ネットをしない条件なら、まだ許容範囲内で使えるイメージ。
今はX230（xubuntu 18.04.3 LTS、64bit）をメインで使っているので、動きが遅く大きな違いはストレスを感じますね。
2019年12月18日 MEMO 0
軽量Linuxの学習として、低スペックのブログ専用パソコンを構築してみた、@ひかげです。
xubuntu 18.04.3 LTSが使い慣れているので、インストールをしたところ「システムプログラムの問題が見つかりました」の表示が出るので、別の軽量Linuxを探す旅に。
Lubuntuは、相変わらず画面のチラツキが生じるので却下。
ずっと気になっていたLinux Mintを少し調査して、19.2 Tina(MATE,64-bit)をUSBで試用するが、初期メモリで750MBくらい消費しているので、Xfce(64-bit)で再チャレンジ。
Linux Mint
Acer AO722
Acer Aspire One 722 AO722-N52C/B [アクアマリン]
AMD Dual-Core C-50（1.0GHz/2コア、いちおう64bit）
11.6インチ（解像度 WXGA 1366×768）
2011年6月ごろに発売
メモリ：4GBに増設
SSDに換装（120GB、9.5mm厚、330 Series SSDSC2CT120A3K5）
インストールしたOS
Linux Mint 19.2 Tina
Xfce,64-bit
インストール直後
ポップアップ起動のアップデートマネージャで、アップデートと更新。
日本語入力についての設定項目
メニュー、設定マネージャー、言語、言語サポートのインストール（japanese）
メニュー、設定マネージャー、入力方法、日本語、インストール
インストールしたソフト
メニュー、設定マネージャー、ソフトウェアの管理
インストールしたソフト2
コマンドから、CPU使用率・温度情報を確認するソフト「psensor」をインストール。
sudo apt install psensor
snapdのインストール
sudo apt install snapd
Zolaのインストール
snap install --edge zola
Hugoのインストール
snap install hugo
おわりに
おおむね、2時間半くらいで最低限のブログ専用パソコンとして使える環境にできました。
しかし、CPUが弱くSATA 3Gb/s接続なので、全体的な動作はソコソコです。
2019年11月5日 MEMO 0
ThinkPad X230iへ120GBのSSD交換で、Xubuntu 18.04.3 LTSをクリーンインストールした、@ひかげです。
ThinkPad X230iは、お手ごろな中古だったので、衝動買いしました。（12800円、4GB、HDD 320GB、win10 64bit、core i3 3110M）
メインで使用しているX230（Xubuntu 18.04.3 LTS、8GB、core i5 3380M、SSD 120GB、KLEVV N600、総書込量 1172GB/1年くらい）よりも少し性能が低いです。
X230iのSSD交換もX230と同じなので、さっそくクリーンインストールをしてみました。
crucial BX500 CT120BX500SSD1JP（購入時 2700円）
遊び用途なので、主にHugoとXAMPPが使えるくらいの簡易な構成です。
ソフトウェア
- Simplenote
- FileZilla
- Google Chrome
- LibreOffice Base
- Pinta
- Converseen
- GParted
- Hugo
外部
- UNetbootin
- XAMPP（xampp-linux-x64-7.3.10-0-installer.run、約 150MB）
新規インストールの結果
事前に準備していたインストールUSB（Xubuntu 18.04.3 LTS）から約1時間30分くらい（ソフトウェア更新を含む）
117.6GB（総量）
101.1GB（空き容量）
14%使用
16.5GB（使用量）
おわりに
使用する用途がHugoとXAMPPなので、X230iでも割と快適に動作します。
X230で、同じデータをHugoでビルドした結果は、100msくらいの差でした。（X230iのほうが若干遅い）
2019年10月29日 MEMO 0
X230のSSD換装をした、@ひかげです。
Lenovo ThinkPad X230は、プラスの精密ドライバー1本で、SSDの換装・メモリ増設が簡単にできるのでLinuxで遊ぶにも手頃なノートパソコンです。
X230のマウンター
純正のHDDマウンター（黒のゴムレール）に、今回のSSD（7mm厚）だと、うまく装着ができませんでした。
赤いゴムレールだとスムーズかもしれません。
X230 SSDの換装は、SSDの外付けケースと似た構造なので、スキマを埋めて固定できる感じで装着することにしました。
X230でマウンターのないSSDの工作
まずは、取り出しが困難になるので、引き出し用の工作をします。（いわゆるベロを取り付け）
熱に弱い素材のテープは要注意です。
その後、SSDを仮装着すると分かりますがマウンターのない状態だと、かなりスキマ・空間があります。
SSDにスペーサーのような工作をして、固定できるようにします。
見えない場所になるので、気にしないことにします。
おわりに
x240以降のモデルは、SSDの交換手順が複雑になったようです。
x230だと2つのSSDをWin10とLinux分けて、状況や気分でカンタンに差し替えて交換もできます。
x230は、xubuntu 18.04.3 LTSをメインで使っていますが快適です。（メモリ4GBでも）
