Linuxメモ

※ "main.js?v20190615" のようにタイムスタンプを追加すると、main.js だけでなく、main.js に import されるクラスやモジュールも最新版が読み込まれるようです

こんな構成
./
test.html
main.js
MyClass.js


(test.html) ... 読み込み元の html ファイル



(main.js) ... import する側
import {MyClass} from './MyClass.js'
var mc = new MyClass()
console.log (mc.myMethod())


(MyClass.js) ... export される側
export class MyClass {
constructor() {
this._val = "This is MyClass"
}
myMethod () {
return this._val
}
}

Javascript (ES6) で import / export を使おうとすると、ブラウザが CRONエラー を吐いてしまい、動作しない。

ローカルファイル同士だとドメイン情報が無く(?)ため、クロスドメイン扱いとなり、このCRONエラーになるらしい。

Google Chrome だったら --disable-web-security --user-data-dir のコマンドラインオプション付けて起動すれば良いみたいだけど、私が使ってる vivaldi だとそんなオプションは当然ない。

仕方ない。サーバー立てるか。
mySQLとかも練習できるし良いかもしれない。

というわけで、やむをえず Windows10 に Apache24 をインストールすることにしたので、その手順を自分メモ。

(Apacheを入手)
ApacheのサイトからzipをDL
zipを解凍
中にある apache24 フォルダを cドライブ直下へ移動 (c:\apache24 となる)

(WWWサービスの起動オプション変更)
Win+Rキー で services.msc を起動
「World Wide Web 発行サービス」の起動オプションを「手動」に変更
同じサービスをいったん「停止」する

(Apache をインストール)
管理者権限でcmdを起動
cd c:\apache24\bin
httpd.exe -k install
エラー表示がなければインストール完了

(Apache を起動)
c:\apache24\bin\httpd.exe をDクリックもしくはcmdから起動
Windowsファイアウォールで「セキュリティの重要な警告」画面が出るので「アクセスを許可する」

(ブラウザで確認)
http://localhost/ にアクセス。
「It works!」と表示されれば起動成功。

(HTMLドキュメントのルートはここにした)
c:\apache24\conf\httpd.conf ファイル251行目に以下の記述がある
DocumentRoot "${SRVROOT}/htdocs"


※ ちなみにシンボリックリンクやエイリアスも置けるらしい。

Dドライブにユーザーディレクトリを置いているので、D:\users\username\htdocs フォルダを作って、
DocumentRoot "D:\users\username\htdocs"

へ変更して保存

test.html を適当に作って↑の htdocs フォルダに保存

apache を再起動し、
ブラウザで http://localhost/test.html が正常に表示されることを確認した。


敷居が高いと思ってたけど、意外とサクッとインストールできたな。

セキュリティ的にこのままで大丈夫なのだろうか？ あとで調べよう。

Sublime Text 3 で、OnSaveBuild プラグインを使用。

scss などを保存時に自動コンパイルしてくれるので、チョー便利！

ただ、 _sample.scss など _ を頭に付けたファイルは保存時にビルドしてほしくないなー。

さっそく Preffrences → Package settings → SublimeOnSaveBuild → Settings - User をいじる。

( \ 記号は、Sublime の設定ファイル上ではバックスラッシュとして表示されてます)


設定ファイルは空っぽなので、以下を追加する

{
"filename_filter": "^(?!_).*\\.(sass|less|scss)$",
}

^ ... 行頭 or 文字列の先頭
$ ... 行末 or 文字列の最後
(?!_) ... ?! に続く文字ではない、の意。(この例では _ ではない、の意味)

これは、*.html 上で記述した Javascript では期待の動作をしたけれど、sublime 上では _ 付きファイルもなぜか全部ビルドされてしまった。

うーん、それではと、こちらを参考にして、
https://stackoverflow.com/questions/16090448/sublime-sass-exclude-with-regex

{
"filename_filter": "^[^_].*\\.(sass|scss)$|\\.(css|js|less)$"
}

と直すも、やはり期待した動作をせず。

※ [] で囲んだ中では、^ (キャレット) は 「次の文字ではない」 を表すらしい。…合ってるかな？


よく見ると、\ であるべき部分は、設定ファイルでは \\ となってる。
エスケープ文字をさらにエスケープしてるような…

わけも分からず試しに \\ をそのキャレットの前に付けてみたら、

{
"filename_filter": "^[\\^_].*\\.(sass|scss)$"
}

めでたく動作しました～☆

ちゃんと _sample.scss ではビルドせずにそのまま保存され、sample.scss ではビルドして保存されるように・・・・

ならない！！！！


実際やったらあれ、動作しない。
全部コンパイルされてしまう。

否定は効かないのだろうか。
Ctrl + F の文書内検索(正規表現) では動作するんだけどなぁ。

じゃ、これでどうだ！？

{
"filename_filter": "^[a-zA-Z0-9].*\\.(sass|scss)$",
}

アルファベットと数字ではじまるものだけ対象、って感じです。
気持ち悪いけどまぁ仕方ない。

あーけどこれも動作しないやー。


情報みっけ。

Avoid saving on partials / SublimeOnSaveBuild
https://github.com/alexnj/SublimeOnSaveBuild/issues/11#issuecomment-24952435

これでどうだ！！

{
"filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(sass|scss)$", // this works.
}

やったー！！ ちゃんと動作しましたー

もうこの正規表現の意味はよくわからないけどねー

Sublime Text 3 が動作軽いので使い始めた。

で、最近必要があって JavaScript を書いてる。

ところが、 SublimeLinter-jshint が ES6 に非対応っぽく、class 使うとエラーだと指摘されてしまうのでなかなか不便だ。

jshint の設定方法もよくわからないので、ES6 対応だと評判の SublimeLinter + ESLint へ移行してみたので、備忘録。


( まずは Package をインストール )

(参考) ESLint を試す
https://akabeko.me/blog/2015/04/eslint/

上のリンクはわかりやすい。

Preferences -> Package Control -> Package Control: Install Package

から、

　・SublimeLinter
　・SublimeLinter-ESLint

の2つをインストール。


( jslint は無効に )

もし今まで SublimeLinter-JSLint を使っていたなら、エラー表示がダブってくるので Package Contol: Disable Package から Disabled しておくこと。もちろんアンインストールでもいい。


( ruby / npm のインストール )

ruby とか npm とかのインストール方法は割愛。
自分のPC環境では、sass+compass を使っていた時にインストール済み。


( eslint のインストール )

Windowsキー -> そのまま「ruby」と入力し、Command Pronpt with Ruby のコマンドラインを起動。

npm i -g eslint

と入力して eslint をインストール。

こいつが eslint の本体だはず。


( ESLint の設定)

ユーザーフォルダ c:\users\xxx (xxxはユーザー名) に .eslintrc という名前の設定ファイルを作成。

そのファイルをエディタで編集する。

書き込む設定内容は、

(参考) ESLintのルールを全部手動で設定するのは大変だからやめておけ
https://qiita.com/khsk/items/0f200fc3a4a3542efa90

あたりを参考に。

正直、初心者には

"extends": [
"eslint:recommended",
],

のオススメ設定的なのを加えるのが一番カンタンだ。"真の男" になりたいのなら別だが。

↑のはオススメ設定ではないようです。

設定は拡張することができて、その中で特にオススメな部分、のようです。

なのでやはり設定はどっかで拾ってくる必要あり。

( ESLint 本家 )
ESLint
https://eslint.org/

ここで設定のわからない部分を検索するといい。


( 個人的に必須な設定 )

jsを複数ファイルに分割して作業している場合に、他のファイルで定義されている変数や関数などを参照していると、「定義されていない」というエラーになってしまう。これはかなり鬱陶しいので回避したいところ。

この設定だ。

no-undef
https://eslint.org/docs/rules/no-undef#disallow-undeclared-variables-no-undef

↑ これ見るだけだとオフにするしかなさそうだが、

Configuration - Specifying Globals
https://eslint.org/docs/user-guide/configuring#specifying-globals

↑ によると、各ファイルの先頭にコメントで変数を global 指定？することでエラー表示を回避できるそうだ。

/* global var1, var2 */

みたいな感じで書く。

また、

/* global myclass */

のようにクラス名も指定できるようだ。

/* global myfunc */

のようにグローバルな関数も指定できた。便利だ。


( ESLint をコマンドラインでテスト )

適当なフォルダに target.js などを作成し、内容も適当に入力しておく。

Command Prompt with Ruby 上で、

eslint target.js

と打つと、eslint コマンドが正常に働いてくれるのがわかる。
ただし、設定ファイルが何か間違ってたりするとズラーッとエラーで怒られるので注意。


( Sublime上で確認 )

開いていたjsファイルを閉じて開き直すと(もしくは他のタブを見てから戻ってくると)、ところどころ赤丸＆赤枠で囲まれているがわかる。
これで快適な JavaScript コーディングができそうだ。


P.S.
途中でいろいろ試行錯誤したので、何か抜けている部分があるかも。

やり方を忘れやすいのでメモ。

今んとここれが最善策。



iPhoneの標準の動画閲覧アプリは使いづらすぎるよねー。

・閲覧しながらの音量調整とか明るさ調整とかができない。
・普通に左右スライドさせると前後の動画に移動してしまう。
・Android みたいにフォルダ分類が出来ない (やりようはあるのかもしれませんが…)
・動画一覧にタイトルが表示されない。(何の動画かわかんねーよ)

また、iTunes 側のリストに普通に動画を登録してしまうと、フォルダ分類が出来ないので、ぜんぶ同列扱いになってしまい、iPhone側で目的の動画を探すのが大変です。 (プレイリストで分類すれば良いのかなぁ？)

なので、別のやり方でいきます。


※ やり方２が断然オススメです。

▼ やり方１　iTunes + PlayerExtreme の合わせ技

◯ フォルダ分け可能 (ただし１階層のみ)
☓ 標準アプリ 「写真」 にも表示されてしまう
☓ iPhone 非対応の形式の動画は転送してくれない (例えば mp4 はOK、flv や wmv は NG)
☓ 同期なので、iPhone側で削除したりアプリで隠したりは不可

今回のやり方は、動画閲覧アプリ 「PlayerExtreme 」 を使用することが前提です。
※ フォルダ別に表示できる数少ない動画アプリです。

同期元となる適当なフォルダを用意。
今回はユーザーディレクトリ下にある 「ビデオ」 フォルダにした。
そこに、フォルダでカテゴリ分類した動画を用意しておく。

iPhoneを繋げる
　↓
iTunes を起動
　↓
上部にあるデバイスアイコンをクリック (ちっさいです)
　↓
左パネルの 「設定」 の 「写真」 をクリック　※注) 「ムービー」 ではありません。 「写真」 です
　↓
「写真を同期」 にチェック
　↓
「写真のコピー元」 で 「フォルダ選択」 をクリックし、ユーザーフォルダ直下の 「ビデオ」 フォルダを選択
　↓
「選択したフォルダー」 をクリック
　↓
「ビデオを含める」 にチェック
　↓
下に 「ムービー」 直下のフォルダが表示されているので、必要なフォルダのみをチェック。
　↓
一番下の 「同期」 をクリック。

しばらく待てば、同期が完了します。

ちなみに、フォルダ分けされるのは、１階層目のみ。
２階層目以降のファイルは１階層目にまとめられてしまう。

例えば、 「音楽PV\JPOP」 「音楽PV\JROCK」 という２つのフォルダは、音楽PV というフォルダにいっしょくたにされます。
これを避けるには、 「音楽PV - JPOP」 「音楽PV - JROCK」 のようにフォルダ分けする必要があります。

ちなみに、左パネルで 「ムービー」 を選ぶと、iTunes に登録済みの動画からの選ばされることになるので、使いません。

ここで同期した動画は、標準アプリ 「写真」 にも表示されます。


▽ 閲覧の仕方 (PlayerExtreme)

PlayerExtreme を起動
　↓
下部の 「iPhone」 をクリック
　↓
「Photo」 をクリック
　↓
先ほど同期した 「ムービー」 直下のフォルダ一覧が出ているので、たどっていくと目的の動画が見つけられる

フォルダ分けされていなくても良いのなら、標準アプリ 「写真」 でも閲覧可能。



▼ おまけのやり方 やり方２　オススメ！　PlayerExtreme の書類としてインポートする

◯ iPhone 非対応の形式でも転送される
◯ 標準アプリには表示されない (隠したい場合)
◯ フォルダ分け可能！ ☓ フォルダ分けは不可
◯ 階層化可能！ (少なくとも2階層までは確認済み)
☓ iPhone側での削除は不可

その１と併用もできます。

iTunes の 「ファイル共有」 機能を使います。

iPhone を USB 接続
　↓
iTunes を起動
　↓
上部のデバイスアイコンをクリック
　↓
左パネルの 「ファイル共有」 をクリック
　↓
「PlayerExtreme」 をクリック
　↓
ファイル一覧に必要なフォルダや動画ファイルを放り込むだけです。

しばらく待つとインポート完了。

ここでインポートした動画は、標準アプリ 「写真」 には表示されないようです。

階層化フォルダで分類されているので、とっても見やすいです！


▽ 閲覧の仕方 (PlayerExtreme)

PlayerExtreme を起動
　↓
下部の 「LIBLARY」 をクリック
　↓
同期した動画やフォルダすべてが一覧される

フォルダ分けはされていないので不便だが、標準アプリ 「写真」 には表示されない、というのがポイント。
階層化フォルダにも出来るし、iPhoneが標準で非対応の動画も放り込める。ベストです。

それと、PlayerExtreme には独自にパスコードロックが掛けれます。
左上の設定ボタン → Security → Passcode Disabled をタップで Enabled にし、パスコード (6桁) を入力。
※ 試用期間？が過ぎると、パスコードロックが使えなくなりますが、画面の指示通りにこのアプリをAppleSotreで5星評価？すれば試用解除されます。

以上です。

最初は sass + compass というコマンドラインツールでがんばってみました。
http://kobuchicken.blog22.fc2.com/blog-entry-170.html

けど、エディタ Atom + プラグイン sass-autocompile という強力なツールがあるようなので、そっちへ乗り換えとなりました。
Atom オススメです^^

インストールと各種設定の手順はこちら。


▼ Atom / node.j / node-sass をインストール

▽ Atom は公式サイトのインストーラーで入れる。

Atom 公式サイト
https://atom.io/


▽ Node.js

Node.js
https://nodejs.org/en/

上記から安定版のインストーラーをDLしてインスト。

コマンドプロンプトで

node.j -v

としてバージョンが表示されていれば OK。


▽ node-sass

コマンドプロンプトで

npm node-sass

でインストール。

node-sass -v

としてバージョンが表示されていれば OK。


▼ Atom の設定とプラグインインストール

▽ 日本語化
File → Settings → +Install → japanese-menu と入力 → 検索された japanese-menu の下の Install をクリック

▽ テーマ設定
ファイル → 環境設定 → テーマ …で選ぶ。自分は黒よりも、慣れてる白系がいい。

▽ Atom のプラグイン sass-autocompile
ファイル → 環境設定 → +インストール → sass-autocompile と入力 → 検索されて出てきた sass-autocompile のインストールをクリック

▽ sass-autocompile の設定
適宜。
出力はとりあえず Expanded のみにチェック入れておく。完成間近になってきたら Compressed もチェック入れたら良い。
タブキーによるインデント幅を半角スペース 2 → 4 に変更しておく。

▽ sass の構文サポート？をインストールしたかも。



▼ Sass + Compass との違いは・・・

Sass + Compass
o 出力先ディレクトリが選べる (config.rb に記述する)
o 好きなエディタが選べる (Mery とか)
　x 作業開始時にコマンドプロンプトで compass watch しておかないといけない
　
Atom + sass-autocompile
o 保存すれば自動的にコンパイルしてくれる (compass watch が不要)
o 強力な入力補完機能！ 折畳み、ペイン分割、e.t.c.も
o サイドバーでフォルダ＆プロジェクト表示 (ファイル選択が容易)
x 出力先ディレクトリが選べない (.scss と同じフォルダに .css が自動的に出力される)


▼ css 保存先を選べないことへの対処

1. scss ファイル＆フォルダ群をコピー
(仮に Wordpress + _s (underscores) テ―マだとすると・・・)
ローカルのテーマフォルダ ((root)/)wp/wp-content/themes/_s/ を開き、そこに foundation.scss と vender フォルダ、その他の必要なフォルダを放り込む。

2. FTP 転送の除外リストに加える
WinSCP などの FTP ソフト上で、*.scss を転送しない「除外設定」にする。
フォルダも転送したくないなら、
css/components/
css/forms/
css/grid/
css/prototype/
css/settings/
css/typography/
css/util/
css/vendor/
css/xy-grid/
.sass-cache/
を除外リストに追加する。(これらフォルダとその中身はローカルでの scss コンパイル時に参照されるだけなので、サーバーに転送する必要はない)

※ WinSCP の場合は、サイトマネージャーで該当のサーバー設定を開き、「転送設定」をクリック。
「ファイルマスク」欄に「|*.scss;.sass-cache/;css/components/;css/forms/;css/grid/;css/prototype/;css/settings/;css/typography/;css/util;css/vendor/;css/xy-grid/」と入力。

あとは普通に foundation.scss を Atom で編集 → 保存 → コンパイル → FTPソフトでアップロード すればOK。

元々 Windwos7 が入っていた ノート PC、ACER ASPIRE ONE 722。



いったん LinuxLite をインストールして使ってたのですが、訳あって Windwos10 を入れる必要が出てきました。

Windows10 のクリーンインストールで Windows7 や 8 のプロダクトキーが使えるようになった、ということなので、さっそく試してみると成功！


こんな流れでした。


▼ 必要なもの
　・ あらかじめ焼いておいた Windows10 のインストール DVD
　・ 外付けDVDドライブ (USB接続)

ちなみにこの DVD は、母艦 PC 上で MediaCreationTool で DL 時だか焼く時に、 「このPC用」 のチェックは外しておくこと。
その PC 用のドライバ「しか」含めてくれず、別の PC でインストールが続行できなくなるので。


▼ ASPIRE ONE での作業

BIOS の設定で DVD ドライブの起動順を HDD 等より上位にしておく。

まずは SDD の消去をします。

Windows10 インストール DVD を外付け DVD ドライブで起動。

キーボードレイアウト選択画面で 次へ をクリックし、修復なんたらをクリック。
コマンドプロンプトを起動し、

diskpart
list disk (容量などからターゲットのディスク番号を推測)
select disk 0 (0： Win10 インストール先のディスク番号)
clean (ディスクの中身を消去)
exit
exit

でディスクを消去しておく。(この作業要らないかも)

電源を切る？を選択。

再度電源をオン。

キーボードレイアウト選択画面で 次へ をクリックし、インストール をクリック。

インストール先ドライブを選択します。
(先程消去したので空っぽになってます)
次へ をクリック

プロダクトキー入力画面 に Windows7 のプロダクトキーを入力

おー！普通に通りました！


途中こんなエラーが。

OOBERESION で問題が発生しました。
もう一度試す / スキップ

もしこれが出たら、こちらを参考にして、「もう一度試す」をクリックしたら通った。
https://support.microsoft.com/en-us/help/4020048/windows-oobe-fails-when-you-start-a-new-windows-based-computer-for-the

２番めのキーボードのレイアウト？を選べといわれ、いらねーよ、と思いつつも、スキップ出来ないようなので、言語「英語(米国)」 キーボードレイアウト「日本語」 を選んだ。

ネットワークに接続。うちの Wifi SSDI を選んで、パスワード入力で通る。

しばらく待つ。

個人情報の設定などをして、無事に Windows10 が起動しました～！ ばんざーい！



最初の時点では、スタートパネルでアイコンが ↓ マークになっているものがありましたが、
いちど再起動したら普通に表示されるようになりました。


▼ 使用感
こ～んな古い時代遅れの機種なのに、 Windows10 だと快適に動作しています。
SSD の威力と Windows10 の軽さでしょうか。すごいなー！

Foundation 6.4 から導入された xy-grid を使いたい！
でも、 cell の間隔とかが広すぎてダサいので、css をカスタマイズしたい！

そんな欲望に飲まれてしまったため、何日間も暗闇の中をさまよい続ける結果にorz

そう、ver 6.4 とか xy-grid は最新版なので、ネット情報が少なすぎて、sass 初心者にとっては鬼門といっても良いくらい。

悪戦苦闘しながら、どうにかこうにかコンパイルするとこまで辿り着いたので、誰かの役に立てば、ということと、自分用メモ、という意味で、道標として記録しておきます。

うろ覚えとかいい加減な説明があると思いますが、優しくご指摘くださると嬉しいです^^


当方の環境は、

OS:　Windows10 64bit
エディタ:　Mery


今回の目的地は、「Wordpress で制作中のサイトに foundation 6.4 の スタイルシートを sass でカスタマイズして適用する」 です。

(ちなみに、 css 版 foundation で手書きでチマチマ cell 間隔を変えればいいじゃん！ ・・・というのは、一見取り付きやすくて簡単そうですが、ひとえに cell のマージンやパディングと言っても色々な設定が複雑に絡み合ってるっぽいんで、css 編集はとんでもなく難しいと思います。)


基本的にコマンドライン上での作業がメインになります。
(いろいろなツールをインストールしていきますが、すべてコマンドライン上で動くツールになります。)


まず sass が何か、というと、 可読性・編集性をより良くして要素のネストや関数も使えるようにした超便利な css といった感じ。
sass の形式で書けば、css 書くのがすごーく楽になる。のだそう。

でも、コードの書き方がデザイナーになじまなかったようで、その点を改良した sass の派生版となる scss が出てきた。
(現在は sass のツール&コマンドが scss にも対応/同梱しているような形)

sass は ruby というプログラミング言語上で動くコマンドラインツールとして提供されています。
なので、まず ruby のインストールが必須です。
※ pyton版 sass もあるようです。

それと、sass だけでもいちいち手動でコマンド打てばコンパイルは出来るんですが、それを自動化してくれるのがこちらのツール。

・ sass + compass
・ sass + grunt

という２つの選択肢があるようです。

この compass や grunt というツールは、指定ディレクトリの scss ファイルを監視して、それが編集されたら自動的にコンパイル済みの css を生成してくれる、というスグレもの。

とってもありがたいです。

これと WinSCP といった FTPクライアントのミラーリングアップロード機能を組み合わせれば、scss を編集したらWEB上で即座に編集結果を見ることができます(要キャッシュクリア＆リロード)。

※ アップロード → ブラウザリロード、までさせることが出来るらしいのですが、今回は荷が重いので割愛。

何度も試した結果、compass が使いやすい、というか compass しか動かなかったので compass で行きます。
grunt はさらに pyton が必須なようですし。pyton 入れると容量喰いそう。


A: 「Chocolatey」でWindowsでもモダンな開発環境を作る
https://wood-roots.com/web/tool-editor/1154

こちらのサイトを参考にして、Chocolatey で色々インストールしていきます。

Chocolatey は、Ubuntu でいうところの apt-get みたいなもの。
「コマンドラインによるアプリケーションの導入や削除を実現するパッケージ管理システム」 だそうです。
これで全部揃えられれば便利なんですが、そうはいかないところが初心者泣かせ。



▼ Chocolatey のインストール

管理者権限でコマンドプロンプトを開き、

以下のコマンドをコピー＆ペーストして Enter キーで実行。

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

chocolatey がインストールされました。


▼ 各種ツールのインストール

そのまま下記のコマンドで、 ruby、node.js、sass をインストール。

cinst ruby
cinst nodejs.install
cinst sass

nodejs.install とすることで、 node.js だけでなく node.js のパッケージマネージャー npm というツールもインストールされます。
この npm も試行錯誤中にはよく使いました。

ちなみに npm の -g オプションは、インストールしたコマンドをグローバルで使えるようにするオプションらしい。 必須かも？？

node.js は未だによくわからんのでこれ読んで。

初心者向け！3分で理解するNode.jsとは何か?
https://eng-entrance.com/what-is-nodejs

さて、上記サイト A の執筆時点では cinst で compass もインストール出来たようですが、今は 「そのパッケージはありません」 とエラーになり、入れられない模様。

というわけで別の手段、

・ ruby のパッケージマネージャー gem
・ node.js のパッケージマネージャー npm

のどちらかで入れるという手があります。

少なくとも gem ではインストール出来ました。

gem install compass

これで compass が入りました。



▼ sass + compass の基本

まず任意の場所に作業用のディレクトリを作ります。

今回は c:\users\USER_NAME 以下に作成。
cd で上記ディレクトリに移ってから、

compass create NEW_PROJECT_NAME

で、基本的な scss と css フォルダと config.rb ファイルが作られます。

.config.rb は、 compass が自動監視する際に読み込む設定ファイル。

この設定ファイルがあるディレクトリで compass w と打つことで、config.rb に従って監視＆コンパイルをしてくれます。

http_path　:　忘れた
cdd_dir　:　css ファイルの生成先フォルダ
sass_dir　:　scss ファイルのあるフォルダ (監視先)
images_dir　:　画像ファイルのあるフォルダ (初心者には何に使うのか不明)
javascripts_dir　:　Javascript のあるフォルダ (これも用途不明)

この辺を wordpress テーマのディレクトリ設定に合わせて↓のような感じで書き換えておきます。

# require 'zurb-foundation'
# require 'compass/import-once/activate'
# Require any additional compass plugins here.


# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = (environment == :production) ? :compressed : :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

# add_import_path "node_modules/foundation-sites/scss"

output_style = (environment == :production) ? :compressed : :expanded

の一行は、css 生成の様式を決めています。ちなみに IF 文みたいになってます。
詳しいことは調べてみてください。

それでは監視スタート。

compass w

しばらく待つと、「>> Compass is watching for changes. 」 と出て監視を始めてくれます。
(ちなみに監視を中断するには Ctrl + C)

さっそく、試しにエディタで scss/screen.scss ファイルを開いて適当に css を書いて上書き保存してみます。

さきほど compass w したコマンドプロンプト上で、

modified scss/screen.scss
write css/screen.css

と出ればコンパイル成功。

エディタで css ファイルを開いて内容を確認してみます。

ちなみに、compass create NEW_PROJECT_NAME を打たないで自前で scss や config.rb を用意してももちろんOK。


それと、必須ではないが、 .scss ファイルの先頭に

@import 'compass'

と入れておくと、compass のコアモジュール (例えば typography とか) の mixin が呼び出せるそうだ。
compass/reset みたいに、コアには入っておらず名前を明示しないと使えないモジュールもある。

※ あくまでも Compass に同梱の mixin を使えるようにするだけなので、使わないなら書かなくていい。

詳細こちら。 sass と compass コマンドについて、すんげー詳しい。

Sass/Compass のインストールと基本的な環境設定
http://www.webdesignleaves.com/wp/htmlcss/652/



▼ パーシャルファイルと 「 _ 」 「.scss」 の省略について
それから、先頭に 「_」 があるファイルはパーシャルファイルと言って、foundation.scss などメインの scss ファイルから @import で呼び出して使うモジュールのようなもの。

パーシャルファイル (_付きのscssファイル) について
https://liginc.co.jp/designer/archives/11623/2#a21

大事な点が一つ。

sass / scss のコード上や、 sass / compass などのコマンド上、 config.rb 上では、この先頭の 「 _ 」 と拡張子 「.scss」 は省略してもよい決まりになっている。

例えば、

@import 'settings/settings'
@import 'util/util'

と書かれている場合、これは↓のどちらかの意味になる。

@import 'settings/_settings.scss'
@import 'util/_util.scss'

@import 'settings/settings.scss'
@import 'util/util.scss'



▼ foundation 6.4 の scss の入手

探すのにずいぶん手間取りましたが、ここにありました。

Github - zurb/foundation-sites
https://github.com/zurb/foundation-sites

※ 内容からして現時点 (2018/7/9)　では ver6.4 になっているっぽいですが、これってどんどんバージョン上がって行ってしまうんだろうか？

下の方の Run Locally ってとこにコマンドライン経由でのこれのインストール方法も載っています。

私はそれに気付かず読んでなかったので、右上あたりにあるグリーンのボタン 「Clone or Download」 → 「Download Zip」 で PC に保存し、さっき compass create で作ったディレクトリに解凍しました。

ただし、実際必要なのは、

　・scss フォルダ
　・assets フォルダ
　・js フォルダ
　・_vendor フォルダ
　・config.rb ( compass create で作ったやつでもOK)

位じゃないでしょうか？ (間違ってたらゴメンナサイ)



▼ foundation 6.4 の編集すべきファイルと作法

少なくとも私の場合は、ですが、基本的にエディタで編集するべきファイルは、

- scss/foundation.scss

　　どのコンポーネントを実装するかを選択する。 foudation の幹にあたる部分。

- scss/settings/_settings.scss

　　foundation の各種コンポーネント毎の変数の設定

- scss/_global.scss

　　全般的なスタイルの変数の設定

- scss/app.scss

　　ユーザーによる foundation 以外のスタイル設定
　　(※zipには同梱されてないので自前で作る)

の4つ。 (上の説明間違ってるかもです。)

foundation 関連のスタイルは出来る限り _settings で修正し、それ以外のオリジナルのスタイルは app.scss の一番後ろに書く、というのが作法だそうです。

Zurb Foundation 6 Sassバージョンを使用する上で、理解すべき2つのscssファイル
https://qiita.com/kohki-shikata/items/2d80c11f509cc804af9a

foundation の修正では、上記4つの scss ファイルを目をこらしてよく読みつつ、テキスト検索掛けたりしながら、必要な部分を書き換えて修正していきます。


しかしその前にやっておくべきことが多々あります(=o=;)

↓　↓　↓



▼ 最新の _settings.scss ファイルを入手 (ここうろ覚えです)

_settings.scss を見ると、 xy-grid に関する設定がどうやら無いっぽい。これでは xy-grid のクラスが生成されないはず。
いえいえちゃんとありました(^_^;) すぐ下の 追記) を読んでね

検索してみるとここが出てきた。

Zurb Foundation - sass版について
https://foundation.zurb.com/sites/docs/sass.html

上の記事を良くみると、

「Download the latest settings file here.」 (最新版の settings ファイルはこちらからダウンロード)

とあるので、これをダウンロードして _settings.scss として scss フォルダに上書き保存する。


追記)
念のためテキスト差分を比較してみたけど、下記のとおりほとんど同じみたいです(^_^;)
ファイルサイズも 21.8KB とほぼ同じです。
なので、下の差異が気にならなければ、このダウンロード＆上書きはやらなくてもOKかも。

> fc _settings_zip.scss _settings.scss

ファイル _settings_zip.scss と _SETTINGS.SCSS を比較しています

***** _settings_zip.scss
$global-prototype-breakpoints: false;
$global-button-cursor: pointer;
$global-color-pick-contrast-tolerance: 0;
***** _SETTINGS.SCSS
$global-prototype-breakpoints: false;
$global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
*****

***** _settings_zip.scss
$menu-item-color-active: $white;
$menu-item-color-alt-active: $black;
$menu-item-background-active: get-color(primary);
***** _SETTINGS.SCSS
$menu-item-color-active: $white;
$menu-item-background-active: get-color(primary);
*****

***** _settings_zip.scss
$tab-item-padding: 1.25rem 1.5rem;
$tab-content-background: $white;
***** _SETTINGS.SCSS
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
$tab-content-background: $white;
*****




▼ _settings.scss ファイルを import する設定

仮コンパイルしてわかったのですが、

このままだと _settings.scss が読み込まれていない様子なので、

scss/foundation.scss ファイル
// --- Settings ---
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings/settings';

この最後の行を、下記のとおりコメント解除する。

@import 'settings/settings';

よし、と。



▼ _settings.scss ファイルの修正

仮コンパイルを試すと、

util/util が見つからない (settings/settings ファイルの63行目)

というエラーが出ている。どれどれ・・・

settings/_settings.scss (63行目位)
@import 'util/util';

なるほど。 _settings.scss のあるフォルダを調べると、この _util.scss ファイルは確かにそこに無い。 ていうか util フォルダごと無い。

そっか、ディレクトリ指定が間違っているんだ。

おそらく、同梱されていた _settings.scss ファイルではなく外部から持ち込んだものだからだろう。 →同梱版も同じ間違いになってました。

_settings.scss ファイルから見ると、本来 ../util/util が正しい。 ../ は一つ上の階層を表す。

なので下記のように修正した。

settings/_settings.scss (63行目位)
@import '../util/util';



▼ foundation-normalize を include する

Foundation 製の normalize を適用しておきたい。

scss/_global.scss (136行目～)
@mixin foundation-global-styles {
//　@include foundation-normalize;

のコメントアウトを外す。

@mixin foundation-global-styles {
　　@include foundation-normalize;

これでOK。

これをやらないと、 「vender/normalize が見つかりません」 というエラーが出たりする。
scss/vender/_normalize.scss のファイル自体はちゃんと存在してるはずなので、たぶん上記の手順やればエラー収まるはず。

それから私は Wordpress のテーマ _s (underscores) を使用していて、その中にも Normalize のスタイル設定が書かれています。
foundation-normalize と重複になるため、 _s の style.css から該当部分をバッサリ削除しました。


追記)
もちろん normalize.css は自前で用意することも出来る。

_s (underscores) の Wordpress テーマの css reset は、こちらを使っているそうです。
https://necolas.github.io/normalize.css/



▼ 超重要！ foundation.scss で @mixin foundation-everything を記述する

※※※ 初心者なのでこのやり方が正しいのかはわかりません ※※※

で、いくらコンパイルしても、

/**
* Foundation for Sites by ZURB
* Version 6.4.3
* foundation.zurb.com
* Licensed under MIT Open Source
*/





のコメント部分が foundation.css に出力されるだけで、中身がほとんど空っぽなのです。

悩み続けて最後に辿り着いたのが、 foundation.scss にある、

@mixin foundation-everything( [中略] );

という mixin (≒関数) の存在。

XY-Grid クラスの読み込みを含め、ほとんどすべての Foundation のスタイルやパーシャルファイルを読み込んでいる部分です。

でもこれ、mixin なんで、要するにプログラミングでいう関数みたいなものなんですが、これは関数の定義にあたる部分。
なので、ここで即実行されるわけじゃないんです。

だから、どこかでこれを呼び出してあげないといけないじゃん！

scss/foundation.scss の最終行に追記
@include foundation-everything;

これです。 この一行。これで完璧。 (関数定義より後ろに追記のこと)

初心者のため、ここに書くべきなのかどうかはわかりません。もしかしたら他のやり方かもしれないし、他のファイルの他の場所かもです。

さぁこれでコンパイルも正常に行われ、foundation.css もファイルサイズが 200～300KBくらいと立派になり、中身がしっかり出力されていることを確認しました。



ここまででようやく foundation を修正するための手はずが整いました。

さて次項から実際の修正へ。



▼ XY Grid を有効にする

ver6.4 ならデフォルトで XY-Grid が出力されるはずなんだけど、うーん、何度コンパイルしても、XY-Grid のスタイルが出力されません。

生成された css に grid-container / grid-x とかのクラスが見当たらない。

foundation.scss を良く見てみると・・・

scss/foundation.scss (79行目～)

@mixin foundation-everything(
　$flex: true,
　$prototype: false,
　$xy-grid: $xy-grid
) {
　@if $flex {
　　$global-flexbox: true !global;
　}

　@if $xy-grid {
　　$xy-grid: true !global;
　}

　// Global styles
　@include foundation-global-styles;
　@include foundation-forms;
　@include foundation-typography;

　// Grids
　@if not $flex {
　　@include foundation-grid;
　}
　@else {
　　@if $xy-grid {
　　　@include foundation-xy-grid-classes;
　　}
　　@else {
　　　@include foundation-flex-grid;
　　}
　}


// Grids 以下をよく読むと、 $flex = true の場合のみ、else 文内に入れる。
その else 文では、 $xy-grid = true の場合には XY-Grid のクラスを読み込み、false の場合は flex-grid を読み込む、となっている。

要するに、XY-Grid を読み込ませるためには、

　$flex = true かつ $xy-grid = true

でなければならない、ということです。

「私が使いたいのは XY-Grid なんで Flex-Grid じゃない！」ということでついつい $flex: false としてしまいたくなりますが、

XY-Grid を使いたければ、$flex: true, はいじらずそのままにしておきましょう。

※ ここでいう $flex は Flex-Grid のことを指すのでしょうか？ …とりあえず今は深く考えないでおきます。

ちなみに最初のあたｒで $xy-grid に $xy-grid を代入する、という変なことをしてるように見えますが、
前の $xy-grid はこの mixin 内で有効な Empty な変数、後ろの $xy-grid はグローバルな変数で _settings.scss で値を定義済み、同名でも別物、というこだろうと思われます。

また、$xy-grid の設定も必要です。

scss/settings/_settings.scss (855行目～)
// 56. Xy Grid
// -----------

$xy-grid: $xy-grid;

これを

$xy-grid: true;

に書き換えます。

もしここで $xy-grid に値を設定してあげないままだと、

undefined variable: "$xy-grid"

というエラーになります。


おし！これでちゃんと XY-Grid 関連のスタイルが出力されるようになりました！


この時点でコンパイル、アップロードしてブラウザで見ると、ちゃんと XY-Grid のスタイルが生成されておりました！ やった！



▼ 「foundation-grid という mixin が定義されていません」 というエラーが出た場合

コンパイルすると、なぜか

error scss/foundation.scss (Line 100: Undefined mixin 'foundation-grid'.)

というエラーが出る場合。

これの原因は、

$flex と $xy-grid の変数の組み合わせによっては、scss/foundation.scss の @mixin foundation-everything() の中の IF 文内の @include foundation-grid が実行されず、 mixin である foundation-grid が読み込まれないから

です。

$xy-grid を true にするなら、 $flex も true にしてあげましょう。これでこのエラーがでなくなります。



▼ .grid-container の幅を変えたい

規定の幅でボックスを中央寄せにしてくれる便利なクラス .grid-container。

たぶんこんな風に使う。
<div class='grid-container'>
　　<div class='grid-x'>
　　　　<div clss='medium-4'>Cell-1</div>
　　　　<div clss='medium-4'>Cell-2</div>
　　　　<div clss='medium-4'>Cell-3</div>
　　</div>
</div>

その幅は、基本的に $global-width 変数が決定している。

デフォルトではこのようになっている。

scss/_global.scss (21行目～)
/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(1200) !default;

rem-calc(n) は、nピクセルの長さを単位 rem に変換するための mixin (≒関数)。

なので、ここでは$global-width が 1200px に設定されているとわかる。

なんでわざわざ px から rem に直すのかは調べたけどもう忘れました(^_^;)

さて、1200px だと広すぎるので、980px にしよう。 　※ 後に 960px に修正した

/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(980) !default;

.grid-container の幅の設定はこれでOKだ。

と思ったら、生成された css で幅の値が変わっていない。

Grep 掛けると、これが見つかった。

scss/settings/_settings.scss (69行目)
$global-width: rem-calc(1200);

_settings.scss でも $global-width の設定があり、これで上書きされてしまっているようだ。

_settings.scss → _global.scss の順に読み込んでいるのにおかしいなぁ。

_settings.scss で
$global-width: rem-calc(980);
として、

さっき修正した _global.scss では1200に戻してコメントアウトしておこうか。
// Commented out because of Duplication in _settings.scss(line 69)
// $global-width: rem-calc(1200) !default;
わかるように上にコメント書いた。

OK、foundation.css 上もちゃんと _settings.scss で指定した幅になっている。

これで正常に $global-width の指定が効くようになった。


逆に、 $global-width はいじらずに、 $grid-container の値を直接書き換えることも出来る。

scss/settings/_settings.scss (859行目)
$grid-container: $global-width;
↓　↓　↓
$grid-container: rem-calc(980);



▼ XY-Grid のマージンを狭くしたい

grid-x と cell で3つ横並びのボックスを作りました。

HTMLコードはこんな感じ
<div class='grid-x'>
　　<div clss='medium-4'>Cell-1</div>
　　<div clss='medium-4'>Cell-2</div>
　　<div clss='medium-4'>Cell-3</div>
</div>


でも、それぞれのスキマというか間隔が広すぎて、このままだと、何だかかなり・・・すごく・・・・ダサかっこ悪い。

そういう場合はここ。

scss/settings/_settings.scss (861行目あたり)
$grid-margin-gutters: (
small: 20px,
medium: 30px
);

この値を小さくすればいい。

$grid-margin-gutters: (
small: 5px,
medium: 15px
);

small / medium は恐らくブレークポイントでいう small / medium サイズのことだろう。実際そうだった。

これでだいぶちょうど良い感じに狭くなりました。

▼ ブレークポイントを変更したい場合

ブレークポイントを変更するには、

scss/settings/_settings.scss (104行目～)
// 2. Breakpoints
// --------------

$breakpoints: (
　　small: 0,
　　medium: 640px,
　　large: 1024px,
　　xlarge: 1200px,
　　xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);

をいじればいい。

$breakpoints で small～xxlarge の各ブレークポイントの下限サイズを px で決定している。

ちょっとわかりにくいので、わかりやすく書き直すとこういうことかな。
small: 0～639px
medium: 640～1023px
large: 1024～1199px
xlarge: 1200～1439px
xxlarge: 1440px～

また、 $breakpoint-classes で実際に使用する ( css に出力する) ブレークポイントを決定しているようです。

私の場合は small と medium では両方ともスマホ仕様のスタイルにし、large 以上～ で PC 用のスタイルを適用したいと思います。

あれ、でも PC では常にブラウザの左右枠と右端のスクロールバーで幅を取られるから、1024px幅の古めのPCではスマホ表示になってしまうなぁ。

レスポンシブのブレイクポイントを設定する前に知っておくべきこと (2017/7/3 更新)
https://deaimobi.com/breakpoint/

なるほど、960px をタブレットと PC の境目 (ブレークポイント) にしたら良い、と。
言い換えると、960px～の幅の時に PC 用のスタイルにする。

ブラウザサイズのうち、 WEB を表示できる範囲、が大事なんですが、
960px なら、 1024px の古い PC で見ても、スクロールバー等に多少幅を取られても大丈夫だろう。


だろう、では不安なので、実際の値を計算してみる。

一般的ではないが、Vivaldi だと左端のパネルに 34px、スクロールバーに 17px 、合計 51px を取られている。 左パネルがある分、普通のブラウザより取り幅が多いので良いサンプルだ。

表示できる幅は、1024 - 51 = 973px

コラおいー、前に設定した $global-width & $grid-container の 980px じゃ幅が広すぎるじゃないか。

960px に修正しておこうっと。

scss/_global.scss (21行目～)
/// Global width of your site. Used by the grid to determine row width.
/// @type Number
$global-width: rem-calc(960) !default;

これでよし。

連動して、ブレークポイントも large の下限をいじってこうしよう
small: 0～639px
medium: 640～960px
large: 960～1199px
xlarge: 1200～1439px
xxlarge: 1440px～

ま、xlarge とか xxlarge は使わないんで、そのままで OK。


結果、こうなりました。
// 2. Breakpoints
// --------------

$breakpoints: (
　　small: 0,
　　medium: 640px,
　　large: 960px, // ここだけ修正
　　xlarge: 1200px,
　　xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large); // これはそのまま

メディアクエリはこうなるんでしょうか。
/* Small & Medium = まずはスマホのスタイル記述 */

@media screen and (min-width: 960px) {
　　/* Large = PC 用のスタイル記述 */

}

ちなみに、この面倒くさいメディアクエリも、 scss を使えば変数や mixin で簡単に書けるそうです。



▼ 最後にコンパイル

諸々を上書き保存すると、 compass がコンパイルしてくれます。

生成された css/foundation.css を見ると、しっかり XY-Grid のクラス (.grid-container / .grid-x 等) が含まれています！

そして、これを所定の場所にアップロードして、ブラウザで(キャッシュクリアしてから) リロードすると、しっかり幅が狭くなっています！　レイアウト崩れもないので、ちゃんと XY-Grid が効いています！

やったーバンザーイ！



とまぁ整然と書き連ねていますが、

ここに至るまでは、たーーーーーーーーくさんの試行錯誤がありました。

間違いだらけでようやく辿り着いたので、出来たときに嬉しいったらありゃしない！



皆さんも素敵な sass ライフを～☆


初心者なんでなんか勘違いとかあったらご指摘くださいね^^



追記)
あ、bower ってなんだっけ？入れた気がするけど。
https://www.visualive.jp/blog/archives/388/#Bower

追記)
Github から拾ってきた foundation-sitezip 内の .version ファイルを見てみると、
zurb:foundation-sites@6.3.0

となってる。 6.4 じゃなく 6.3 やんけ(^_^;)

でも xy-grid が効いてるのは謎だ。

Aser Aspire One 722 に LinuxLite を入れたものの、動作がもたついて遅かったため、
320GB HDD から 128GB SSD へ換装を試みました。(2.5インチ)

容量が大きいものから容量が小さいものへのクローンはちょっと手間が掛かるようです。


用意したもの
・SATA用 外付けHDDケース
・128GB SSD
・Ubuntu Live USB メモリ

今回は Ubuntu ではなく LinuxLite の Live USB メモリを使いました。


参考にしたサイトはこちら。

容量の少ないSSDへのクローン
https://qiita.com/elm200/items/44108983f4eee85dcb15


ありがちな状況だが、たとえば、HDD は500GBだが、SSD は240GBしかない、みたいな状況で、HDD → SSD へ内容をまるごとコピーしたい場合。

次の手順で行う。

HDD のパーティション構成を整理して、コピー先の SSD の容量(例:240GB)以内で収まるようにする。
sudo dd if=/dev/sda of=/dev/sdc bs=16M (HDD が /dev/sda, SSD が /dev/sdc にあると仮定。最後は /dev/sdc の容量不足エラーで終わるが気にしない）
SSD に対して、testdisk コマンドを使って、パーティションテーブルを修復
dd するだけだと、パーティションテーブルが正しくないため、GParted でパーティションテーブルが認識されない。

実際にこれでうまく行ったときは、本当に感動した。
しかし、当たり前の話だが、セクタ単位で物理的にコピーを取ると、本当にディスクのクローンって作れてしまうのね…。


手順がシンプルですね。一番わかりやすかったです。

標準の dd コマンドでもクローニングできるそうですが、不良セクタがあると終了してしまうそう。
なので、不良セクタがあってもクローニング可能だという ddrescue でやります。


こちらも見ておくと良いです。※小容量→大容量のクローンですが

【Ubuntu】【自分用メモ】 SSDの移行手順について。
https://kometchtech.blog.fc2.com/blog-entry-940.html



まずは、LinuxLite の Live USB を用意。

それを挿してノートPCを USB メモリから起動。


▼ 旧HDDのパーティション構成を新SSDより小さくする

これ重要です。

Gparted (スタートメニューの System → Partitionなんちゃら) を起動して、古いHDDの各パーティションの容量を目一杯小さくします。

/ 28GB
/user 280GB
swap 9GB

て構成だったんですが、

まず swap をオフ。

/ ルート も /user も、右端のとこをつまんで一番左のいけるとこまで持っていきます。
小さくするとスキマが開くんで、 /user をこれまた目一杯左へ移動。

(swap はパーティション消せばよかったのに消し忘れた。 swap のパーティションの開始位置はそのままだったから、たぶんこの後の ddrescue でクローンされずに潰れてます)

新SSD 128GB に対して、小さくした旧HDDの容量が30GBくらいになったような。余裕でクローンできますな。

Apply (適用) して完了。Gparted を閉じます。

▼ 新SSDにパーティション情報を書き込む

一旦初期パーティションテーブル情報を書き込みます。

sudo cfdisk -z /dev/sdb

何やら GUI が起動した気もしますが適当に進めました。
EFI GPT を選んだような。


▼ ddrescue インストール

インストール済みUbuntuのクローンを新しいハードディスクに作成する (1/2)
http://www.itmedia.co.jp/enterprise/articles/0811/20/news019.html

↑を参考にしてリポジトリの設定をいじってから、 ddrescue をインストール。

ただし LinuxLite の場合は、Synaptic を起動してそのメニューからソフトウェアソースを表示しました。(だってスタートメニューに無いんだもの)

そして、[コミュニティーによるメンテナンスされるオープンソースソフトウェア（universe）] にチェックを入れます。(ていうか最初からチェック入ってた^^;)

コマンドラインから

sudo apt-get install ddrescue

でインストール完了。


▼ ddrescue でクローニング

fdisk -l で新SSD(ターゲット)、旧HDD(ソース) のデバイスなんちゃらを確認。

新SSD … /dev/sdb
旧HDD … /dev/sdc

でした。

コマンドラインで

sudo ddrescue -v -f /dev/sdc /dev/sdb

で容量不足のエラーを無視して強制的にクローニング。

しばらく待つ。

完了すると、やっぱり容量不足みたいなエラーが出てるけどスルーしてOK。



▼ testdisk インストール

このままだとパーティション情報が壊れていて起動できないそうなので、 testdisk で修復します。

まずはコマンドラインでインストール。

sudo apt-get install testdisk



▼ testdisk でパーティション情報？を修復

sudo testdisk

何やら端末上で英語のアプリが起動します。

testdisk の使い方についてはこちら。

パーティション情報を削除してしまったHDDの復旧を Ubuntu 上の TestDisk を用いて復旧する。
http://d.hatena.ne.jp/kusoboze/20100727/1280252069

ちなみに今回の新SSDのパーティションタイプ？は EFI GPT になってました。
LinuxLiteインストール時にそれ選んだ記憶があります。

わからないながらも上記を参考にしながらなんとなく進めていき、新SDDの /dev/sdb を選び、チェックをスタートする。

１時間以上掛かってチェックが終了。

んーなんかエラーっぽい表示。

よくわからんけどパーティション情報を Write して、testdisk を終了。

LinuxLite を再起動してみる。

Gparted を起動して新SSDのパーティションを調べる。
一応認識されているようです。

小さく左に寄せられてるので、目一杯までパーティションを広げておく。

途中で1回 Gparted が落ちた。こえぇ。

再度トライして書き込み成功。


▼ HDD → SSD 換装

ここでお腹を開けて換装。

うまく起動するかなぁ。


▼ やったー！

起動しました！！！

クローニング成功！

嬉しいですねぇ☆

動作は、サクサクとまではいかないまでも、キビキビ動くようになりました☆

Windows10でGoogle日本語入力が使えない時使えるようにする方法
http://izu.wpblog.jp/post-3810/

ありがたい。

その手順を貼り付けとくと・・・

以下のフォルダを開く
　C:\Program Files (x86)\Google（64ビットの場合）
　C:\Program Files\Google（32ビットの場合）

その中にある Google Japanese Input フォルダを右クリック、プロパティをクリック

セキュリティータブ → 編集をクリック

追加をクリック

「選択するプロジェクト名を入力してください」 の欄に 「ALL APPLICATION PACKAGES」 を入力

OK → OK → OK

※ 再起動等は不要

以上で Edge やコルタナや Microsoft Store から入れたアプリ上で GoogleIME が使えるようになっているはず。