さよなら Surface Pro、こんにちは MacBook AIr

Surface Pro 4の画面が突然、上下に激しく揺れるようになってしまいました。Stay at Home でのオンライン会議での酷使が原因？と思いましたが、既知の不具合で購入から３年以内であれば交換可能だとありました。しかし、残念ながら３年半が経過、、、。

急ぎ代替のPCを購入しなければ「Stay at Home without PC」になってしまいます。Surface Pro 7という選択肢も考えてみましたが、既知の不具合で使えなくなったPCの後継機を選ぶのも「なんだかなあ」という感じで少し抵抗があります。

またWindowsノートPCを物色しているうちに、「Windowsじゃなきゃダメなの？」という疑問も生じてきました。クラウドサービスを利用して様々なことがブラウザベースでできるようになったいま、Windows に固執する理由はほとんどなくなってきていました。

そして何よりも、新しい Macbook Air が、かなり魅力的です。

Windowsで使っていたアプリ

Macへの乗り換えができるかを考えるにあたって、Windowsで頻繁に使っていたアプリがなんだったかを考えてみました。

Microsoft Office

Offceで最も利用していたのは Excelでした。しかし、最近では、Googleスプレッドシートの進歩が著しく、Microsoft Office との互換性も非常に高くなりました。関数もほぼ同じように使えます。Excelマクロは使えませんが、GAS（Google Apps Script）でのアプリケーション作成にも慣れてきました。

プレゼンテーション資料は、PowerPointに分がありますが、簡単な資料であればGoogleプレゼンテーションで十分ですし、Keynote も無料で使えます。

Microsoft Office の呪縛から解き放たれ、サヨナラするときがきたのかもしれません。

どうしてもMicrosoft Officeが必要となるようであれば、Microsoft 365 for Mac という保険もあります。

iMindMap

普段は手書きでマインドマップを作成していますが、トニー・ブザンが提唱するiMindMapも時折使っています。こちらは、Mac版をインストールしてライセンス登録するだけで問題なさそうです。

Open Live Writer

実はこれがいちばんの問題でした。ブログを書くのにOpen Live Writerを使っていましたが、Macユーザー向けのGoogle Blogger用のよさげなライティングソフトはなさそうです。しかし、Bloggerが提供する標準エディターが、以前と比べて格段に進化しています。

とはいっても、AtomやBracketsのようなHTMLエディターとの併用も必要そうです。

最初は、いままでよりも時間がかかるかもしれませんが、いずれ新しいブログの書き方に慣れるはずです。

英英辞典

Oxfordの英英辞典を購入して使っていましたが、AppleストアにMac OS版の ‎「Oxford Dictionary of English」 がありました。価格も1,200円とお手軽です。

ということで、Windowsからの卒業を決心。

MacBook Airは廉価版で十分？

MacBook Air が新しくなって選択肢が増えてしまいました。

• プロセッサ（Core i3, Core i5, Core i7）
• メモリ（8GB, 16GB）
• SSD（256GB, 512GB, 1TB, 2TB）

が、選べるようになっています。標準モデルは、下記の２機種です。

• Core i3, 8GB, 256GB（¥10,4800 税別）
• Core i5, 8GB, 512GB（¥13,4800 税別）

プロセッサとSSDの容量に違いがあり、価格差は3万円です。「なぜ、悩みを増やすの？」という感じですが、選択肢が増えるということは多様なユーザーを取り込むのにいいことなのでしょう。

悩んだら人に訊くべしということで、Macに詳しい友人に訊ねてみたら、「使い方によるけど、動画や音楽をバリバリに編集しないなら、廉価版で十分じゃない、拡張するならメモリにしたら」と即レス。

ではと、Core i3 モデルをAmazonでポチッとな。ちなみにAmazonで購入するとポイントが5%付与されます。

Apple MacBook Air（13インチ, 1.1GHzデュアルコア第10世代 Intel Core i3プロセッサ, 8GB RAM, 256GB） )

Apple（アップル）

楽天市場で調べる

Amazonで調べる

※MacBook Air は、USB Type-C なのでUSB変換ケーブルも併せて購入しました。

Apple USB-C - USBアダプタ

Apple(アップル)

楽天市場で調べる

Amazonで調べる

廉価版 MacBook Air の実力は

ブラウザベースの作業、YouTubeの再生、メッセージのやりとりなどは、もちろんサクサクと動作して問題ありません。通常の使い方ならCore i3、メモリ8GBで十分そうです

WindowsユーザーのためのMacの使い方

WindowsユーザーがMacに移行したときに戸惑うのが、

• 右クリック
• アプリの切替
• Deleteキー
• ショートカットキー
• 日本語変換の操作

ではないでしょうか。キー操作がWindowsとは若干異なります。

右クリック

トラックパッドで右クリックするには、指二本でクリックします。詳細は、Mac で右クリックする方法 - Apple サポート をみてください。

アプリの切替

Windowsでアプリの切替は alt + tab ですが、Macでは、command + tab です。これだけならわかりやすいのですが、アプリ内で切り替える場合（例えばブラウザを複数立ち上げているときなど）は command + F1となり、実際には command + fn +F1 と３つのキーを押さなければなりません。

Mac	Windows	ショートカット
command + tab	alt + tab	アプリの切替
command + F1		アプリ内の切替

ショートカットのキーボードの設定で ”次のウィンドウを操作対象にする” を command + F1 から option + tab に変更してみるのもいいかもしれません。

Deleteキー

入力した文字を消していくには、MacではBackSpaceキーを使います。BackSpaceはカーソルより前（左側）を消します。一方、Deleteキーは、カーソルより後ろ（右側）を消します。

MacにはDeleteキーはありませんが、fn + バックスペース で Deleteキーと同様にカーソル後ろの文字を消せます。 

ショートカットキー

基本的なショートカットでは、Windowsでは controlキー だったものが、commandキーとなります。よく使うものが下記になりますが、詳細は、Mac のキーボードショートカット - Apple サポート を参照してください。

Mac	Windows	ショートカット
command + C	control + C	選択範囲をコピー
command + V	control + V	ペースト（貼り付け）
command + X	control + X	選択範囲を切り取り
command + A	control + A	すべて選択
command + tab	alt + tab	アプリの切替

日本語変換の操作

WindowsユーザーがMacに移行したときに戸惑うのが日本語入力のときの変換です。

Mac	Windows	変換
control + K	control + I	カタカナに変換
control + L	control + O	半角英字に変換
control＋セミコロン（;）	control + P	全角英字に変換

これは結構違います。でもAppleもそのあたりは心得ているようで、環境設定のキーボードに  ”Windows風キー操作” というのが用意しています。

また日本語変換の確定がエンター２回というのも馴染めません。こちらも上記のWindows風キー操作の設定をすると１回で変換が確定できます。

Windows風キー操作の設定

上で説明したカタカナ変換、英字変換、及び Enter（エンター）キー １回での日本語変換するために、Windows風キー操作を設定しましょう。

”システム環境設定” の ”キーボード ” を選択します。

”入力ソース” の ”Windows風のキー操作” をチェックします。併せてちょっとお節介な ”ライブ変換” についてはオフしましょう。

これでWindowsユーザーにとっても馴染みのあるキー操作で日本語変換ができます。

あとがき

このブログは、MacBook Air の Chrome で、Bloggerの標準エディタを使って書いてから細かいタグや改行の調整を Brackets  で仕上げました。

スクリーンショットや写真の加工、レイアウト調整など、Macの操作で慣れていないこともあって、いつもよりは時間がかかってしまいましたが、何とかやっていけそうです。

Apple MacBook Air（13インチ, 1.1GHzデュアルコア第10世代 Intel Core i3プロセッサ, 8GB RAM, 256GB） )

Apple（アップル）

楽天市場で調べる

Amazonで調べる

Googleスプレッドシート から 簡単にHTMLの表を作成する

HTMLで表を描くのは嫌いです。簡単な表であればエディタで直接書けばよいのですが、大きな表を作成したり、セルを結合したり、バックグランドの色を変えたりとなると、、、、。

「んー、面倒くさい！」

HTMLで表を作成する（基本編編）

先ずは、HTMLで表を作成するときのおさらいです。

枠線

枠線を描くときは、<table border=”数値”> を使い、枠線の太さを px（ピクセル）で指定します。

<table border="1">
    <tbody>
        <tr>
            <td>データ１</td>
            <td>データ１</td>
            <td>データ１</td>
        </tr>
    </tbody>
</table>

表示：

データ１

データ２

データ３

border で枠線を描くと二重線となります。枠線を一本線にするには、二重線の予約を設定する cellspacing を使って、二重線の余白を 0 にすることで2本の線が重なり一本線となります。

<table border="1" cellspacing="0">
    <tbody>
        <tr>
            <td>データ１</td>
            <td>データ１</td>
            <td>データ１</td>
        </tr>
    </tbody>
</table>

表示：

データ１

データ２

データ３

セル内の余白

表の見栄えをよくするために、セルの内の余白を設定しましょう。セル内の余白については、tableタグの中で cellpadding=”数値” で指定します。数値は px（ピクセル）指定です。余白は、左右、前後に適用されます。

例：cellpading=”0”

※ セル内の余白なしの場合は、cellpadding を指定する必要はありませんが、下記の例では明示的に０としています。

<table border="1" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>データ１</td>
            <td>データ１</td>
            <td>データ１</td>
        </tr>
    </tbody>
</table>

表示：

データ１

データ２

データ３

例：cellpading=”3”

<table border="1" cellspacing="0" cellpadding"3">
    <tbody>
        <tr>
            <td>データ１</td>
            <td>データ１</td>
            <td>データ１</td>
        </tr>
    </tbody>
</table>

表示：

データ１

データ２

データ３

例：cellpading=”5”

<table border="1" cellspacing="0" cellpadding="5">
    <tbody>
        <tr>
            <td>データ１</td>
            <td>データ１</td>
            <td>データ１</td>
        </tr>
    </tbody>
</table>

表示：

データ１

データ２

データ３

セル内の背景色

表の見出し行に色を付けるとわかりやすくなります。背景色は、<td bgcolor=”カーラーコード”> です。下記の例では見出しの色を #cccccc としています。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し１</td>
            <td bgcolor="#cccccc">見出し２</td>
            <td bgcolor="#cccccc">見出し３</td>
        </tr>
        <tr>
            <td>データ１</td>
            <td>データ２</td>
            <td>データ３</td>
        </tr>
    </tbody>
</table>

表示：

見出し１	見出し２	見出し３
データ１	データ２	データ３

文字寄せ

セル内の文字は、aling=”” で 左寄せ（left）、中寄せ（center）、右寄せ（right） の指定ができます。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し１</td>
            <td bgcolor="#cccccc">見出し２</td>
            <td bgcolor="#cccccc">見出し３</td>
        </tr>
        <tr>
            <td align="left">左</td>
            <td align="center">中</td>
            <td align="right">右</td>
        </tr>
    </tbody>
</table>

表示：

見出し１	見出し２	見出し３
左寄せ	中寄せ	右寄せ

セル内縦位置

セル内の文字位置の指定となります、valign=”” で 上端揃え（top）、中央揃え（middle）、下端揃え（bottom） の指定ができます。但し、１行で収まるようなときは指定しても何も変わりません。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td bgcolor="#cccccc">見出し１</td>
            <td bgcolor="#cccccc">見出し２</td>
            <td bgcolor="#cccccc">見出し３</td>
            <td bgcolor="#cccccc">見出し４</td>
        </tr>
        <tr>
            <td>あ<br />い<br />う<br />え<br />お></td>
            <td valign="top">上端揃えlt;/td>
            <td valign="middle">中央揃え</td>
            <td valign="bottom">下端揃え</td>
        </tr>
    </tbody>
</table>

表示：

見出し１	見出し２	見出し３	見出し４
あ い う え お	上端揃え	中央揃え	下端揃え

セルの結合

表をきれいに見せるために横のセルと結合するには colsapn属性 を、縦に結合するには rowsapn 属性を使い、結合する行数、列数を指定します。

<table border="1" cellspacing="0" cellpadding="3">
    <tbody>
        <tr>
            <td rowspan="2" valign="middle">２行１列</td>
            <td colspan="2" valign="middle" align="center">１行２列</td>
        </tr>
        <tr>
            <td>データ１</td>
            <td>データ２</td>
        </tr>
    </tbody>
</table>

表示：

２行１列	１行２列
	データ１	データ２

簡単にHTMLで表を作成したい

と、データを埋めるだけでなく、そもそもHTMLで表を記載するのは面倒くさい。オンラインでHTMLで表を作成できる「Table Tag Generator」を使っていましたが、それでも、超簡単とまではなりません。

どうせならスプレッドシートで作成した表をHTML表記に変換するようなツールがあればいい！そういのを作成している賢い人はいないのかと探してみると、

「いらっしゃいました！」

Googleスプレッドシートで作成した表を 背景色、文字色、セルの結合、文字寄せ、文字揃え、セル内の改行 など シートで作成した見た目に近い形で、HTMLのTABLEタグに変換してくれます。

モーリーさんのスクリプトをカスタマイズ

モーリーさんが作られたスクリプトを若干変更して使わせていただきました。

変更点

• 枠線・余白を設定
• <tbody>タグの追加
• 文字の縦位置を中央揃えに
• 見出しの変更

枠線・余白 + <tbody>タグ

<table>タグに枠線と余白の設定を追加し、併せて<tbody>タグを追加

【変更前】13行目

var tableTag = "<table>"; // テーブルタグを格納する

【変更後】
表に1pxの枠線で囲み、セル内の余白を3pxに + <tbody> タグを追加

var tableTag = '<table border="1" cellspacing="0" cellpadding="3"><tbody>'; // テーブルタグを格納する 

【変更前】113行目

tableTag += "</table>"; // テーブルタグを閉じる

【変更後】
＜/tbody>タグを追加

tableTag += "</tbody></table>"; // tbodyとテーブルタグを閉じる

文字の縦位置を中央揃えに

文字の縦位置についても取得とありますが、Google Sheets で ”垂直方向の位置” を変更しても、なぜか常に bottom （下端揃え）となっていたので、シートの設定に関わらず、middle（中央揃え）としました。下記では<td>タグで1セルづつ、文字の縦位置を設定していますが、<tr>タグに valign=”middle” を追加すれば、行全体を “中央揃え” にすることができます。

【変更前】97行目から105行目

// 縦方向の文字寄せ
var alignString = range.getVerticalAlignments()[i][j]; // スプレッドシートのセルの文字寄せの状態を取得する
switch(alignString){ // 文字寄せの種類別処理
    case "top": // 上寄せ
    //case "middle": // 中央寄せ（縦）テーブルタグのセルのデフォルト位置なので記述しない
    case "bottom": //下寄せ
        rowTag += ' valign="' + alignString + '"'; // テーブルタグの文字寄せの属性値を作成する
        break;
}

【変更後】
セルの文字寄せ状態は取得せずに、常に valign=”middle”（中央揃え）とする。

// 縦方向の文字寄せ
rowTag += ' valign="middle"'; // 中央揃えに設定

見出しの変更

太文字のセルを見出しとして <td> ではなく <th> を設定するようになっていましたが、背景色などその他が設定されないので、太文字の場合には、見出しとして<th>タグに変更するけど、それ以外のシートの属性は、反映されるように変更。

【変更前】71-85行目

// 通常・見出しセル、セルの背景色、文字色を設定する
var cellTag = ""; // セルタグ
var colorString = ""; // 背景色指定の属性値
if(range.getFontWeights()[i][j] === "normal"){ //　文字が通常の場合（太字でない場合）
    cellTag = "td" // 通常のセル
    if(range.getBackgroundColors()[i][j] !== "#ffffff"){ // 白色の場合
        colorString = ' bgcolor="' + range.getBackgroundColors()[i][j] + '"'; //色指定の属性値を追加する
    }
}else{ // それ以外の場合
    cellTag = "th"; // 見出しセル
}
rowTag += "<" + cellTag + margeString + colorString; // セルの結合と背景色指定を追加する
if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合
    rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する
}

【変更後】
通常文字であれば<td>、太文字であれば、見出しタグ<th>とする。

// 通常・見出しセル、セルの背景色、文字色を設定する
var cellTag = ""; // セルタグ
var colorString = ""; // 背景色指定の属性値
if(range.getFontWeights()[i][j] === "normal"){ //　文字が通常の場合（太字でない場合）
    cellTag = "td"; // 通常のセル
} else { //見出しセル
    cellTag = "th"; // 見出しセル
}        
if(range.getBackgroundColors()[i][j] !== "#ffffff"){ // 白色の場合
    colorString = ' bgcolor="' + range.getBackgroundColors()[i][j] + '"'; //色指定の属性値を追加する
}
rowTag += "<" + cellTag + margeString + colorString; // セルの結合と背景色指定を追加する
if(range.getFontColors()[i][j] !== "#000000"){ // 文字が黒でない場合
    rowTag += ' style="color:' + range.getFontColors()[i][j] + '"'; // 文字色指定を追加する
}

とっても簡単にGoogleシートからHTMLの表に変換

「象と散歩: アレクサ、ポモドーロを開始して！」の表も、Googleシートで作成した表をこちらのスクリプトでHTML変換しています。

とっても便利です。ありがとうございます！！！