Mac Book Airを購入後、ひとまず入れたソフトなど【セキュリティ、プログラミング、親指シフト・・・】

PC・ソフト覚え書き

こういう人間▼が、初めてのMacを手に入れて、ひとまず行った設定やインストールしたアプリをメモします。

  • 親指シフトユーザー(Windowsでは「やまぶきR」愛用)
  • プログラミング勉強に使いたい(本格的な制作はこれから)
  • ブログ書いたり、手持ちサイトの編集もしたい

 

目次▼

 


日本語入力の設定

まずは、日本語入力での落ち着かない点を直しました。

ディスプレイ右肩の「あ」をクリックして、以下２点を変更。

  • ライブ変換をOFF(私は気持ち悪いので)
  • 下の方の「日本語環境設定」＞「入力ソース」タブ＞「候補表示」のフォントをゴシック体に(好みの問題)


アプリのインストール

ここから怒涛の、ぐぐってダウンロード作業です。

セキュリティソフト(ESET Cyber Security Pro)

いくらMacがウイルスに強いって言ったって、絶対じゃないでしょ？　というビビリな考えのもと、これ入れました▼
ESET Cyber Security Pro

数カ所のブログで、異口同音に「Macならこれっしょ」とオススメされていたものです。

１台用の無料お試し版をインストールしました。

 

ESET Cyber Security Pro　の不具合について

ただ、最初トラブルがありまして。
「セキュリティとプライバシー」から、他のアプリの「アクセシビリティの許可」を設定しようとしたら、出来なかったんです。

この原因が「ESET Cyber Security Pro」でして、公式サイト▼に従い一度アンインストール → 不具合対応版を再度インストールしたら、良くなりました。

ESET製品をインストール後、アクセシビリティ/フルディスクアクセスの登録内容が表示されなくなる｜ESETサポート情報｜キヤノン

これ以上問題が起きなければ、３０日の試用期間が終わる前に、有料版を購入予定です。
１台用は6480円(税込)のところ、今は5900円(税込)だそうです。


親指シフトのソフト

これがないと記事が(日本語長文が)書けない！

Windowsで使っているソフトはダメなので、Mac向けを検索。
こちらの記事▼を参考に、二つのソフトを入れました。

Macで親指シフトを導入するために必要なことはこれ!｜のべかく

 

親指シフトエミュレーター(Lacaille)

公式：Lacaille

さっきのセキュリティソフトのせいで、アクセシビリティの許可ができなくて、あーーっ！　てなってたのはこのソフトでした。

これが動くと、親指シフトができます。


インストール後の設定は、「ログイン時に起動」「NICOLAエミュレーション」をONに。
親指キーは、左が「英数」、右が「かな」。「初回無効」にチェックを入れています。なかなか快適。


変換の動作は、左親指でスペースを押したり、右親指で右親指キーを押して変換されなくて「んん？」ってなったりしてますが、これくらいならそのうち慣れるでしょう。

また、使っていて意図通りの文字が出ないときは、適宜設定を書き直してます。
「：」を「後退」から「：」に、とか。ハ行の小指シフトで半濁音が出るのを、その他キーと同じように英字にしたりとか。
これもそのうち落ち着くでしょう。

キー入替ソフト(Karabiner)


公式：Karabiner

機能キーとかの入れ替えができるソフト。(詳しくは分かってない)
右Commandキーに「かな」を割り当てると、親指キーとバッティングしなくてラクだよ、とのことで入れてみましたが。


「Lacaille」の設定で、親指キーの「初回無効」をONにしておけば、シフトは単打／入力モード変更はダブルクリック的に押す、で問題ない気もします。

まあしばらく使ってみます。

 

Google Chrome

公式：Chrome

このブラウザがないと、開発が始まらない！

 

軽いテキストエディタ(Cot Editor)

公式：Cot Editor

シンタックスハイライトしてくれて、かつ、軽くて余計なことはしないテキストエディタを求めて。(WindowsではMeryを使っています。ちょっとしたjsとか、ブログの下書きとか、これで書くことが多いです)

Macにデフォルトで入っているメモ帳は、油断すると文字装飾が変わるのがいじくらしいんです。

 

で、CotEditorは中々シンプルで良いのですが、カッコ記号をまたぐ時のハイライトだけはうざったいです。
設定変えられるかな？

 

高機能テキストエディタ(Atom)


公式：Atomのダウンロード

参考：テキストエディタのAtomをインストールしたら最低限設定しておきたいアレコレ｜Webrandum

がりがりプログラムを書くときのエディタ。自動でインデントつけてくれたり、入力候補を出してくれたり、高機能です。


参考記事を元に以下のパッケージを追加し、エディタの設定を直しました。きっと快適です。

  • japanese-menu
  • file-icons
  • minimap
  • highlight-selected
  • highlight-line

 

PHP・MySQL開発環境(MAMP)

 

公式：MAMPのダウンロード

参考：ウェブカツのPHP・MySQL部　Lesson2

 

PHPとMySQLのローカル開発環境です。
これで外でもPHPができる！　今日はとりあえず入れただけです。

 


FTPソフト(File Zilla)

公式：FileZilla

参考：FileZillaの設定｜エックスサーバー

手持ちサイトの手入れをするには必須です。借りてるサーバーのヘルプを参照しながら設定。


WindowsではFFFTPを使っていますが、これまたMacでは使えないので、調べて代用品を導入しました。

 

あとがき(蛇足)


調べてインストールして、この記事も書いてたら、４〜５時間ほど経過したようです(汗)

セキュリティソフトの不具合で嵌められてたのはありますが、それにしても。


まあ、記事書いたおかげで、このMacでの親指シフトは早速慣れつつあります。

ショートカットキーも少し覚えたし。コピー＆ペーストとか。

 

ともかく、これで、Macの環境は整った・・・！　はず！

明日からまた頑張ります。 

プログラミング初心者が、MacBookを比べて購入した話

PC・ソフト覚え書き

プログラミングを本格的にやっていこうとすると、Windowsパソコンでは大変みたいです。 

Macなら元々入っている機能が、Windowsだとソフトのダウンロードやら設定から始めないといけない、それもよくわからんエラーと闘いながら・・・なんぞと、大変苦労するとか。

実際Twitterで時々、先輩受講生の嘆きをお見かけして、これは確かにMacを買わないとまずい、と思いました。

 

それでなくても、我が家のノートPCちゃんは非力なので。

この先、作業が本格的になると、今のままではデスクトップPCでしか出来なくなります。引きこもりまっしぐらです。回避するためにも、持ち運べる環境が欲しい！

 

以上より、Mac買うしかないね、というわけです。

どんだけ迷って決めたのか、参考までに書き残したいと思います。

 

目次▼


どんなスペックにするか
 


主に見たのは、機種自体と、画面サイズ、メモリとSSDの容量。
特にメモリ(いわゆる「机の広さ」)を幾つにするかが、作業効率に影響が大きいように思って、気にしてました。

 

Macは機種が絞られているので、Windowsパソコンよりもよっぽど選びやすい気がするんですが、なかなかどうして迷います。
なにしろプログラミング趣味レベルから見ると、全てオーバースペックに見えてしまいます。
スペックアップするとどんどん高額になるので、これも悩みどころです。


ちなみに普段のパソコンのスペック(参考まで)

普段持ち歩いてるノートちゃんは、メモリ2GBですが、HTML・CSS・jsまでなら、何てこともなく動きます。(画像編集はひーこら言ってますが)

メインのデスクトップPCは、メモリ4GBで、何でもサクサク動きます。

ここから見ると、次項のMacのスペックは、雲の上みたいに感じます。


プログラミング用Macの理想スペック

ウェブカツ公式には、メモリは最低8GB、とあります。

ツイッター上では、proの方がよいとか、メモリ16GB積んどいた方が後々いいよ、とか意見を見ました。
Photoshopは相当メモリ食うよ、とか。

・・・すげえ、想像がつかない！


Appleストアの詳しそうな方が言ってた話

旦那と一緒に、実物を見に店舗へも行ってみました。
そこで知識がある方の店員さんがおっしゃってたことには▼

  • (airとproで)入ってるOSやソフトは同じ
  • 処理能力が、air(13インチ)とpro(15インチ)では倍くらい違う
  • 動画やグラフィックをやるなら、proでないと力不足と思われる
  • プログラミングだけならairでも十分かと

「処理能力」は、CPUのクロック数のことかしら。Airでも十分、との意見はちょっと響きました。

 

私のMac購入の条件

以上、いろいろ見聞きして、自分の基準が固まってきました。


絶対条件：

 

  • サイズは13.3インチ(画面大きめ、かつ持ち運びやすい大きさ)　→MacBookAirまたはPro
  • できれば安く手に入れたい　→店頭でのセールや、Apple整備済製品が選択肢になる

※整備済製品は、Apple公式の中古品、です。

出自は店頭展示品や返品、とどこかで見ました。(ソース忘れた)
中古ではありますが、アップルが新品同様に整備してくれてるし、保証も1年間つくし、十分だと思うのです。
私が見てたラインナップは、だいたい新品より2万くらい安く見えました。

 

スペックのイメージ：

 

  • SSDは128GB(一番小さい)でよさげ　(いざとなれば外付けハードディスクで賄える)
  • メモリは8GBか16GBか？　将来を見据えると16GBが良いのかもしれないが、手持ちのPCは4GBでもサクサク動くし、うーん、まずは８GBで使ってみようか？
  • タッチバー(上位機種についてるやつ)は別に要らない。高いし

 
結局のところ

だんだん、私はAirで十分かもしれない、と思えてきました。
メモリは多分8GB、SSDは128GBになりそうです。

 

購入した日の話

家電量販店のチラシをチェックしたり、Macの整備済製品のページをチェックしたりしていたところ、整備済製品に良さげなのが出てきました！

ありがたいことに、３種見比べることができました。SSDは全て128GBです。

  • Air　114,800円　1.6GHzデュアルコア　2018年10月モデル　メモリ8　色シルバー
  • Air　134,800円？(メモし忘れ)　　　同上　　　　　　　　メモリ16　色スペースグレイ
  • Pro　120,800円　2.3GHzデュアルコア　2017年6月モデル　メモリ8　色スペースグレイ

 

最後にもう一度迷った

メモリについて

8GBの新品くらいの値段で、16GBが手に入るやん、と、グラっときました。（２つ目のAir）

 

AirかProか

今のメイン機を改めて見たら、2.0GHzデュアルコア、でして。
Airだとクロック数が下回る、と気付いてしまって、最後の最後proと迷いました。

 

しかし、proのタッチバー無しモデルは2017年が最新で、
Airの2018年モデルと見比べると、「どうせなら新しい機種！」とミーハー欲が出ました。

(ちなみにproのタッチバー有りだと値段が跳ね上がるので、見始めるときりがないです(16万とか))

 

本体の色

ここ引っかからないと思ってたのに！
スペースグレイの暗い色に、けっこう心引かれたんです。

 

でも、色のためだけ(でもないが)に数万積むのか？とか、
初Macでこだわりすぎたら買い時を逃すぜとか、
すげーこだわるのは二台目でいいじゃんとか、
「私の」感を出したいならうさぎのシールでも貼っとけとか、
何とでも言えますね、色くらい。

 

結局予定通りに


ぐるぐるしたあげく、最終的には、当初予定していたスペックのAirを注文しました。

なかなか長かったですが、こんな感じでした。

 

 

まとめ

最終的な買い物について、自分の中で納得しているのはこの内容です▼

  • SSDは128GBで良いと決めた　(足りれば儲けものだし、いざとなったら外付けで何とでもなる)
  • メモリは16GBが良いかもしれないけど、まずは8GBで使ってみよう、と決めた　(これでも今のメイン機より多い)
  • CPUは、プログラミングだけならAirでも大丈夫ー、とアップルの詳しそうな人が言ってたので信じている

 

何にしても、買わなきゃ前に進まないですからね。

大間違いはしてない！

大丈夫！

 

終わります。

JQueryで3つのclassをtoggle(切替)する方法

プログラミング覚え書き

3種のclassの切替、実務で出てくるものなのかは良く分かりませんが、、
私の趣味の範囲では、今まで2回、使う場面がありました。

うち2回目が、勉強したてのjQueryで、
ハマって自己解決したので、自分のツイートからまとめます。

結論だけ知りたい人は、目次▼から飛んでくださいm(_ _)m

classが２つだと、こうです

まず前提。

$(some_node).addClass('success').removeClass('error');

ウェブカツでやりました。

だったらclassが３つ(またはそれ以上)の場合は？

 

class3つを切り替えるために、色々試します

今回は、'success' 'notice' 'error' という3つのclassを切り替えたいです。

その１　動くけどスマートじゃない

まず書いてみたのがこれ。動きました。

$(some_node).addClass('success').removeClass('notice').removeClass('error');

でも長いです。「絶対これじゃない」感じ。


その２　引数を二つにしてみる

removeClass の引数に２個渡してみると、２個目が認識されません。このメソッドの引数は１個だけらしい。

$(some_node).addClass('success').removeClass('notice', 'error');

その３　素のjsを真似してみる

素のjsでは、こう書くと、容赦なく置き換えてくれてラクです。

getElementById(’node’).className = 'success';

で、真似してこう書いてみました。動きません。

$('#node').className = 'success';

 

コンソールで見たら、 getElementById(’node’) と $('#node') は全然別の物が取れていました。なるほど、無理だ。

 

正解はこれ(やっと検索した)

jQueryの公式ドキュメントを検索して、removeClassの仕様を調べました。(英語(汗))(日本語サイトでパッと見つかったものは、最終更新が2010年くらいで、怖くて見れなかった・・・)

これが正解！↓

$(some_node).addClass('success').removeClass('notice error');

スペースで区切ることで、removeClassメソッドに複数のclassを渡せるんですね。

  

これで３つのclassを切り替えることができました。