【Atom初期設定メモ】Atomインストール・日本語設定・プレビュー画面を見ながらhtmlを編集する設定

Atomは、画面を見ながらコードを書き換えることができる便利なエディタです。

使ってみた感想やうまくいかなかったことは追記していきます。簡単な編集なら、とても見やすく使いやすそうだったので紹介します。

Atomは、ワードプレスのプラグインのように、使いたいツール（パッケージ）をインストールして使用します。初期状態だと、英語画面でプレビュー画面もありません。

この記事は、インストールしてから日本語画面＆プレビュー画面を設定し作業しやすくする環境までを忘れないようにメモしています。

自分のメモが誰かのお役に立てれば幸いですが、初心者ですので思い違いなどあるかもしれません。ミスに気づいたら随時訂正していきます。もし、誤りなどありましたらぜひ教えてください。

atom.io

ステップ１：Atomダウンロード

解凍してインストール。PC上のアイコンはこんな感じ

ステップ２：日本語に設定　welcome guideから設定

デフォルトのままだと英語でちょっと面倒くさいので日本語の設定にします。

今回は、syonさんが作った「japanese-menu」というパッケージを使用します。

＊スクショは、英語の状態で撮るのを忘れました。日本語のままです。すいません。

▼ツールバー下のWelcomeGuide→「Install a Package」をクリック。

 ▼”Open Installer”をクリック

 ▼Install  Packagees→「japanese-menu」と入力→Packagesボタンをクリック。

▼installボタンをクリック。今のところこちらのパッケージでサクサク問題なく使えています。

▼インストールするとこんな感じ。一気に日本語に変わりました。すごい。

ステップ３：htmlプレビュー画面で見られようにする設定

このままだと、ソースしか見られないので、プレビュー画面で確認できるように設定します。

今回は、harsmkさんが作った「atom-html-preview」というパッケージを使います。

▼日本語設定と同じように、パッケージのインストール画面を開く

パッケージ窓に、「atom-html-preview」 と入力。

harsmkさんが作ったパッケージが現れるはず。

そのパッケージのインストールボタンをクリック

＊スクショ撮り忘れました。

▼インストールボタンを押すとこんな感じ

ステップ４：プレビュー画面を見ながら編集する

設定が終了しました。ようやく編集作業に入ります。

▼ファイル→フォルダを開く

▼編集したいhtmlが入っているフォルダをPCの中から選択する。

▼一番左側に、該当するフォルダが現れました。

▼編集したいhtmlページを探してクリック。すると、ソースが現れる

▼htmlソース上で右クリック→Preview HTML

＊atom-html-previewのパッケージがインストールされていないと、この項目は現れません。

＊Welcome画面は邪魔だったので、一番右端に移動させています。

▼こんな感じでソースとプレビュー画面が現れて作業しやすくなります。

おまけ：ツールバーからインストール画面にたどり着く方法

最初welcome guideを消してしまって、パッケージのインストール画面にたどり着くのに苦労しました。ツールバーからもインストール画面にいけるのでそれも記録しておきます。

▼よく分からなくて、最初こんな感じになって焦りました。"Packages"をクリック。

▼Packages→SettingsView →Open

▼Install ボタンをクリック

▼パッケージのインストール窓が登場

ここにたどり着くまでに結構な時間を費やしてしまった。

おわりに

Atomの使い方について参考にさせていただいた記事を紹介します。

私の記事では最低限の日本語対応しか書いていませんが、▼こちらの記事ではもっと詳しく書かれています。ぜひ一読されると良いかと思います。

www.sejuku.net

でも、

Atomで作業し始めてから、Adobe Bracketsを見つけてしまいました。あああ。

この記事読んでると、Brackets使いたくなっちゃう。

www.fourglobe.co.jp

アプリ開発は挫折しましたが、、、。

最後に書いたのが2年前。。

結局一つアプリを作ったものの、その後もう一度勉強するだけの気力が一気に失われてしまいました。

そのかわり、IllustratorやWPをいじるのが楽しくなり、アプリ開発からは遠ざかったもののなんだかんだで、パソコンからは離れられない生活を送っています。

デザインやwebプログラミングで家計を支えるまでの道のりははるか遠いのですが、趣味のサイトを作りながら細々と勉強をし続けています。相変わらず完全に独学で、本とGoogle先生とyoutube先生だけが頼りです。

最近、WPの面白そうな仕事引き受け、きっちり作りたいなぁと思ったら勉強したことを残しておきたくなり、久しぶりにこのブログを復活することにしました。

プログラミング、webデザイン、その他　自分が学んだことを残していきたいと思います。

新しいPC到着、その日に smart shop saveにやられる

念願の新しいPC到着。喜び勇んでセットをしていたら、

ChromeのGoogleバーが反応せず、検索出来ない。そして、、、

smart shop save

のHPしか出てこない。

最初設定がおかしいのかと思ったけど、

絶対変！！！！

調べてみるとマルウエア（ブラウザハイジャッカー？？）と呼ばれるものらしい。。。

詳しくは↓

Yahoo! JAPANで検索を押すと - smart shop save とか言うよく分からない検索... - Yahoo!知恵袋

いろいろ調べたけれど、除去するのはかなり大変そう。まだ、設定したばかりのPCなので、完全に初期状態にすることにしました。

それにしても、ひどい。Chromeを立ち上げた瞬間すでにsmart shop saveにハックされてました。

どこで、やられたか、今思い浮かぶのは次の三つ

1. 古いソフトを入れたから？？（ちゃんと正規で買ったイラレなどなどですが、古いソフトの脆弱な部分が狙われたか？？）
2. 設定画面がいろいろ出ていくなかで、面倒くさくて押してはいけないexeファイルを押してしまったか？
3. セキュリティソフトを設定する前にやられた？

アカウントログインして、今まで使ってたソフトを入れて、、、それだけしか作業をしていなかったのに、ショックです。。。時間にして、新品の箱を開けて電源を入れてから90分くらいの出来事でしょうか。

皆さんもどうかお気をつけください。

感染したらかなりやっかいです。

もし、smart shop saveについてご存知の方がいらっしゃいましたら教えてください。私も調べましたが、どの記事が一番正しいのかよくわかりません。

感染したPC

Windows 10

Dell inspiron 15

2016/01/20

購入してはじめてセットしたその日に感染

プログラミング初心者のノートPC購入物語

前回PCの状態をお伝えしたとおり、現在のパソコンは末期症状です。早く買い替えなくてはと思いながら、どのPCが良いか分からず散々迷いました。

今回のエントリーは、そのPC購入までの葛藤についてまとめた備忘録です。購入したものがこれで良かったのか今でも分かりません。けれど、いろいろ調べたことは次に買い換える時に参考になるかもしれないと思い記事にしました。

パソコンでやりたいこと

まず、パソコンでどんなことをしたいか、整理すると、、、、 

• AndoroidStudio　
• Genymotion　
• Illustrator　
• その他画像編集ソフト

 これらを使っていろいろ作ってみたい。プログラミングはド素人なので高度なゲームなどはムリです。

では、このやりたいことをかなえてくれるPCはどんなものか？いろいろ調べていくうちに、PCそのものについての知識が圧倒的に少ないことを改めて自認しました。そこで、まずは、PCの基礎知識から調べました。

パソコンの基礎知識を学ぶ

Mac→VAIO→DELL（デスクトップ）→DELL（ノート）を使ってきました。DELLは自分で構成を考えながら購入していましたが、安く買えることを第一に考え適当にやっていたので、専門的な用語は理解していません。そこで、こちらのサイトを見ながら復習しました。とてもわかりやすくて勉教になりました。何回もリピートして読みたいです。

korobehashire.blog86.fc2.com

プログラミング初心者が使うPCの必要なスペックはどれくらい？

スペックについて、ある程度理解できたので、次は自分に必要なPC性能を考える。でも、どれだけのスペックが必要なのか。。。イマイチ分かりません。その時に見たサイトがコレ！▼

大学生の使用用途で比較するノートパソコンの性能

使用用途別に書かれていて、具体的にイメージしやすく分かりやすかったです。

つまり、

• メモリ４GBか８GB
• CPU　intel i5以上

あればOKということが分かりました。（2016年1月現在）

でも、、、今使っているPCは、

• メモリ　６GB
• CPU　intel i7 core 720QM

これで、AndroidStudioとGenymotion両方動かして電源落ちまくっていました。熱暴走する原因は結局突き止められないままなので、本来なら今使っているPCでも充分なのかもしれません。でも、不安定な状態が続いてイライラしたので、予算ギリギリまで引き上げて良いものを購入することにしました。

購入希望PCはこれ！！▼

• メモリ　８GB
• CPU　intel i7
• 画面サイズ15インチノートPC

＊ダイニングテーブルで使うことが大前提なので、デスクトップは諦めました。自宅は狭いので私の仕事用スペースはなし！娘が寝てから、ダイニングテーブルが私の作業スペース。

CPUはどれがいい？～”HQ”とはなんぞや？

前提となる知識は理解した。けれど、いざ購入するとなると不安に。。誰かに相談したいけれど周りに詳しい人がいない。そこで、家電量販店に行き、店員さんに教えてもらいました。その中で、気になったのが、「corei７でも、HQとその他では全然違う！プログラミングをするならcoreがHQの方が良い」というアドバイス。今までintel i7以降の数字なんて気にとめたこともなかったので、初心者の私にはHQ？ってなんですの？という状態。”Core i7-4722HQ”のHQ！これはいったいなんだ？説明を聞いてその場でわかったつもりでも理解できず。そこで、検索しまくって調べました。その中でとてもわかり易かったのが、これ！

pcinformation.info

こちらのサイトによると、インテル社のHQの値がつけられているCPUの特徴は　”発熱量が多い”　そして、

・動画編集や画像編集、PC ゲーム等、高い負荷がかかる作業に適した性能を持つ

だから、負荷がかかる作業を必要としない薄いノートPCは熱を帯びにくいということがやっと分かりました。また、現在使用しているPCは、同じintel i7でも性能が全然違う事がわかりました。このサイトでは、CPUの型番がランク付してあるので、候補となるPCの性能を比較するのにとても便利でした。

SSDとHDD、どちらがいい？

時同じくして、夫が会社でSSD搭載のPCを新調し、「早くていいよ！」と自慢しておりました。けれど、SSDが搭載されているのは画面のサイズが小さなものばかり。私が必要としている15インチサイズのものは少数。この違いは何だ？という疑問がわき、また調べました。一番参考になったのはこちらのサイトです。

HDD/SSD の性能の説明

そもそもHDDもよく理解していない私にとって、詳しく書かれていることはとてもありがたかったです。製品選びにも活かされました。

そして、結論！

今はHDDで充分！

軽い！早い！衝撃に強い！という特徴から、小さいノートPCを追求するならSSDの方が良いかもしれません。でも、画像などのデータをきっちり保存したい！持ち運びが少ない！という私の使い方ならそこまで重要ではないことがわかりました。値段がもっと安くなればそっちのほうがいいかもしれませんが、値段に見合うだけのメリットがそんなにないと判断しました。

グラフィックボードは？

DVD や ゲーム の映像を綺麗に見せたり、立体的な設計作業をスムーズに行えるようにする

korobehashire.blog86.fc2.com

一番最初に紹介したHPにわかりやすく説明されていました。つまり、私の用途では必須ではない。今まで曖昧にしていたことがようやくわかってきました。

家電量販店にいってみる

欲しいPCはのスペックがだいたい決まった時に、家電量販店でこちらの製品を紹介していただきました。

それはこれ▼

Fujitsu　 FMV AH53/U

富士通 ノートパソコン FMV LIFEBOOK AH53/U アーバンホワイト(Office Home & Business Premium プラス Office 365) FMVA53UW

店員さんの説明によると、アフターサービスのことを考えるとFujitsuはおすすめとのこと。使い慣れたDELLも捨てがたい。HPも気になる。けれど、店員さんのプレゼンが上手すぎてFMVAHシリーズに心がかなり傾きました。”これ買います！”といいそうになったけれど、そこはぐっとこらえてもう一度他のPCと比較検討することにしました。

DELL＆HP＆FMVを比較してみる

ほとんどFMVに気持ちが固まっていたのですが、使い慣れているDELL、安そうなHPが忘れられず、比較検討してみました。選出したのは、次の３種類。ここから随分悩みました。

• DELL　　Inspiron15 7000
• HP　　　Pavilion Gaming 15-ak022TX
• Fujitsu　 FMV AH53/U

	DELL	HP	Fujitsu
OS	W10 Home 64 bit	W10 64bit	W8.1 64 bit
CPU	corei7-6700HQ	corei7-6700HQ	core i7-4722HQ
メモリ	8GB	8GB	８GB
HDD	１TB　5400rpm	１TB　5400rpm	１TB　5400rpm
グラフィックス	GTX 960M	GTX 950M
ディスプレイ	15.6インチ	15.6インチ	15.6インチ
光学ドライブ	なし	DVD	Blu-ray ドライブ
合計	約13万	約12万	約13万

Fujitsuはさすが、光学ドライブがbluray対応。CDROMに慣れているので、これがないと、ちょっと不安になります。迷う！！でも、現在それを本当に必要としているかといえばそうでもない。それより、Windows10の方が重要。さらに、主人に光学ドライブなんていらないと一蹴される。。。

ついに決定！

迷いに迷って

DELL　Inspiron15 7000

にしました。決め手は、DELLが使い慣れている。これに尽きます。購入までのプロセスを何回か経験しているのでストレスが少し軽く感じました。

それにしても、ゲームをやるわけでもないのにハイスペックなものになりました。corei7にこだわった結果です。おかげで、ためたへそくりよりオーバーな金額になってしまいましたが、かなり悩んだので悔いはありません。このお金を取り戻せるくらい頑張っていきたいと思います。

おわりに

私はプログラミング超初心者です。パソコンについて誰かに教えてもらった事は一度もありません。一生懸命調べましたが、選び方が正しいかどうかはわかりませんのでご了承ください。

なので、もし、「これが必要だった」「これは無駄だった」という話がありましたら教えて下さい。もう購入してしまったので構成は変えられませんが、このページを訪れた方のために教えていただけると幸いです。

スポンサーリンク

PCの熱暴走と戦う～角材を使った応急処置

現在使っているのはDELLノート　Windows7です。

そして、ついに限界が来たようです。

ブログを書く分には問題ありませんが、AndroidStudioを立ち上げるとCoreTempの温度計が99℃までいくようになってしまいました。今まで応急処置をしてきましたが、もうダメそうです。今まで、何度もブラック画面から立ち上がらなくなる時があり、苦労していました。ついに、新しいPCの選定に入らなければならなさそうです。

おかげでAndroidStudioの勉強は今完全にストップです。

そこで、現在のPCに別れを告げる前に、熱暴走と戦った傷跡を残しておきます。

熱暴走、応急処置としてやってみたこと

①3センチ角の棒を用意する。

②テーブルに棒をおいてその上にPCをセット。下駄のような格好になります。

③PCの下で熱い場所に保冷剤を置く（数分）

効果はいかほど？？

▼何も処置していない状態

▼角材をセットした状態

▼保冷剤を置いた状態

約5分でかなり温度が下がります。

自信をもっておすすめできるやり方ではありません。素人が、ない知恵絞って編み出した方法なので、やってることはかなりひどい。保冷剤を使用すると水分が付着する可能性も高いのでマズイんじゃないかと思っています。けれど、突然音を立てて電源が落ちることを思えば、まだマシかと。とりあえずデバックのときだけ保冷剤をセットするようなやり方でだましだまし使ってきました。PCの延命措置ですね。ちなみに、夏は２個使ってました。水滴がPCにつくような状態が怖くて保冷剤の使用は数分です。

Windows１０だったらサクサクPCをが動くのかな。。。でも、PC選ぶのは面倒くさい。まずはへそくりを計算してみよう。

参考

CoreTemp

all-freesoft.net

友達がみんなiphone にのりかえてた。。。

Androidアプリ開発の勉強をしてきました。

まあ、あまり多くの友達にはそのことを伝えてないのですが、、、ちょっと試しに私の作ったものを見てもらおうとしたら、、仲のよい友達の多くがiPhone6にのりかえてた。。。

きゃー！！！

この記事を見ると、、、

世界の傾向とは真逆を進む日本のモバイルOS市場シェア - GIGAZINE

まだまだAndroid使用率は高そうですが、感覚的にアウェイなのでちょっと凹みます。

いつかmonaca にも挑戦してみよう。

それにしても、

まだ、PCで勉強できる環境整わず。勉強時間確保の問題もありますが、PCが不安定。新しく買うしかないのかな。。。リリースできたアプリをもっといじって直したいのですが滞っています。

こんなときは本で勉強だ！！

勉強する時間をどう確保する？？

娘の就寝時間がずれてきました。

ヤバイ！

私の夜の勉強がいけなかったか？？？

狭いマンションなので、ダイニングでパソコンいじったりお茶を飲んでるとやはり気になるようです。確かに、私も夜中２～３時までパソコンいじって朝７時に起きるのは辛い。寝坊する日も増えてきました。

一日の流れをもう一回見直さなくては。。

もしくは、場所の確保！

家族を起こさず勉強できる場所を作らねば！

そんなわけで、また勉強が滞ってます。