好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

Atomで新規ファイルを作成し、保存する

前記事でAtomを入れてメニューを日本語表示にできたものの、
で、どうやって使うの?

パパッとググった感じでは、Atomを便利にできる小技がヒットするばかりで
肝心の使い方を解説してくれているものが見当たりません。

動画で解説してくれているサイトを見つけたので、
これを頼りにhtmlファイルを1つ作成して保存してみます。

http://dotinstall.com/lessons/basic_atom_v2/38805

Atomで初めてファイルを作成する

「ファイル」から「新規ファイル」をクリック。
f:id:Sukinakoto:20170814010421p:plain
「untitled」というタブにエディター画面が開きました。
ここにHTMLを書いていけばいいんですね。
f:id:Sukinakoto:20170814010529p:plain

Atomで初めてファイルを保存する

Atomで作成したファイルを初めて保存する

「ファイル」の「保存」をクリック。

f:id:Sukinakoto:20170814010603p:plain

「名前」欄の右側のアイコンをクリック。
f:id:Sukinakoto:20170814010734p:plain

保存場所やファイル名を指定し、「保存」をクリック。

f:id:Sukinakoto:20170814010805p:plain
するとなんと、保存に失敗してしまいます。
画面キャプチャーを撮り忘れてしまいましたが、
諦めるかもう少し粘ってみるか的な選択肢が出てきたので粘る方を選びました。

Command Line Toolをインストールする

今度は、「コマンドラインデベロッパー・ツール」が必要だ!
と急に言われます。
f:id:Sukinakoto:20170814010837p:plain
なんだかよく分かりませんが、AtomGitHubと関連しているとどこかに書いてあったので、きっと必要なんだろう、ということで「インストール」をクリック。

再び画面キャプチャーを撮り忘れてしまいましたが、
Command Line Toolsの利用承諾書が出てくるので、「同意する」をクリック。

待つ
f:id:Sukinakoto:20170814010857p:plain
「完了」をクリック。

f:id:Sukinakoto:20170814011924p:plain
Atomでファイルを保存できています。

f:id:Sukinakoto:20170814011944p:plain

MacにAtomを入れる

良いエディタはないか

HTMLやCSSJavaScriptの勉強をしたいんだよね、Macで。

というわけで、デスクトップに新しいフォルダを作って.htmlファイルを1つ置いてみたんだけど、
Macに備え付けの「テキストエディット」様、アカンやつや…!

別にフォントの指定なんかいらんねん。
等幅フォントで表示してくれたらええねん。
どう考えてもコード書くのに向いてへん。

と、いうわけでいいエディターがないか調べてみた。
すると、こんな↓サイトがありました。

eng-entrance.com

この中に、

LiveweaveはHTML、CSSJavaScriptなどのフロント画面を、編集しながら確認も出来るテキストエディタだ。上記のように画面が分割されて、左上がHTML5・左下がCSS3・右上がJavaScript・右下が実際の画面となっている。

とあったので、「Liveweave」を入れてみようかと思ったのですが、
このエディターはブラウザ上で動く物、ということでローカルで完結させたい私には少しハードルが高い…
(参考:

リアルタイムで編集・確認ができるエディタLiveweaveが超便利!その魅力と使い方をご紹介! | NESTonline Blog


MacBookに慣れたら再検討しようかな。

ということで、イチオシされているAtomを入れよう。

Atomをインストール

https://atom.io にアクセス

f:id:Sukinakoto:20170813223710p:plain

Atomのダウンロードファイルを取得

「Download For Mac」をクリック。
atom-mac.zipのダウンロードが始まります。
zip形式なんだなぁと思ってダウンロード中のゲージを眺めていたら、

f:id:Sukinakoto:20170813224236p:plain

おやぁ?ダウンロードが終わると全然zipっぽくないアイコンになっていますね。
思いっきり、「アプリケーション」であると主張されていますよ…
これはどうしたら良いのでしょう。atom-mac.zipはどこへ行ったの?もう、解凍されてしまったの?
Macの世界は何がどうなっているのかさっぱり分かりません。

Atomのアプリケーションファイルを開く

Mac - テキストエディタ「Atom」のインストール - 開発メモ - Webkaru

によると、
ダウンロードフォルダに保存されたAtomアプリケーションはアプリケーションフォルダに移動してあげると良いようです。

f:id:Sukinakoto:20170814002437p:plain


アプリケーションフォルダにAtomを移動して、Atomアイコンをダブルクリック。えいっ!

f:id:Sukinakoto:20170813225303p:plain
何かが何かを検証して…

f:id:Sukinakoto:20170813225336p:plain

うわっ。何か聞いてきた。なになに…
今まさにデジタル証明書のあるサイトから自分でダウンロードしてきたファイルだから、大丈夫だね。「開く」をクリック。

f:id:Sukinakoto:20170813225619p:plain
おぉ。アプリケーションが立ち上がった。

Atomに日本語化パッケージを入れる

Atomには日本語に対応した拡張機能があるということなので、早速入れてみよう。

設定タブを開く

f:id:Sukinakoto:20170813225014p:plain
「Packages」の「Settings View」の「Open」をクリック。

f:id:Sukinakoto:20170813230218p:plain

インストールメニューを開く

「Install」をクリック。

f:id:Sukinakoto:20170813234148p:plain

japanease-menuパッケージを検索

「Install Packages」に"Japanese-menu"と入力して、「Packages」ボタンをクリック。
少し待つと…

f:id:Sukinakoto:20170814000029p:plain

「japanese-menu」というパッケージアイコンが出てきましたね。

japanease-menuパッケージをインストール

「japanese-menu」パッケージの「install」ボタンをクリック。
少し待つと…

f:id:Sukinakoto:20170814000102p:plain

インストールが完了し、メニューが日本語表記になった!

最後に、今後Atomを使うにあたって参考にできそうなサイト↓

eng-entrance.com

Macで簡単に画像ファイルのサイズ(縦横の大きさ)を知りたい

Windowsだとエクスプローラーの設定をいじってやったり、
ファイル1つ1つを選んで右クリックのプロパティを確認したり、
といった方法が考えられるのですが、Macには右クリックがない…
ということで、調べました。

Finderの表示設定を変更すると、ぱっと見で画像サイズが分かるようになります。

f:id:Sukinakoto:20170813212135p:plain
Finderを開いて、⚙アイコンから「表示オプションを表示」をクリック。

f:id:Sukinakoto:20170813212356p:plain f:id:Sukinakoto:20170813212332p:plain
「項目の情報を表示」にチェックを入れてウィンドウを閉じます。

f:id:Sukinakoto:20170813212548p:plain
各画像のアイコンの下に横×縦のサイズが表記されるようになりました!

参考サイト↓

Macでファイルの画像サイズを表示させる方法 | kioku7.com

はてなブログでの目次の書き方

目次ってどうやって作るの?

ここまで2日間、ひたすら画面キャプチャーを撮って
何をどう操作したかを残し続けたわけだけど、
色々なブログを見ていると、「目次」がついているものが多い。
どうやって目次を作るんだろう?
ということで調べてみた。

目次の作り方

本文に見出しをつける

本文のうち、見出しにしたい箇所を選択して、
「見出し」メニューから大見出し・中見出し・小見出しを選択する。

f:id:Sukinakoto:20170813202836p:plain

f:id:Sukinakoto:20170813202853p:plain

「shift + return」に注意

1行だけを選んでいるのに、複数行が選ばれてしまう(´・_・`)
なんて時は、行末の改行の仕方を見直そう。

f:id:Sukinakoto:20170813202918p:plain

f:id:Sukinakoto:20170813203024p:plain

「shift + return」で改行していないかな?

見出しが付く範囲は、
「return」で改行された箇所から次の「return」での改行の直前まで
だ。

目次を置きたい箇所で目次ボタンを押す

目次を置きたい箇所にカーソルを置いておき、目次ボタンを押すだけ。

f:id:Sukinakoto:20170813203334p:plain

f:id:Sukinakoto:20170813203504p:plain

以上!

参考サイトはこちら↓

www.habaki4.com

VirtualBoxのCentOS7をシャットダウンして関連するものを全てを閉じる

さてと。

  1. CUI環境のCentOS7をシャットダウンする
  2. 多分、shutdown -h nowだろうなぁと思いつつ、
    CentOS7を触るのは初めてなので、一応調べました。

    今回の教科書はこちらです。↓
    CentOS 7 をシャットダウンする | アイプラス - 全部無料のe-Learning -

    予想通り、過去のCentOSと同じコマンドのようです。
    # shutdown -h now
    というわけで、
    f:id:Sukinakoto:20170813191259p:plain
    「enter」キー押下!
    っと、一瞬でシャットダウンが終わってウィンドウが消えました。
    そりゃぁ、DBを起動させたり、凝ったことは何もしていませんが、
    こんなに早くシャットダウンしてしまうシステムは生まれて初めて見ましたよ。
  3. Oracre VM VirtualBox マネージャーを閉じる
    ローカルはGUI環境なので助かりますね。見たままです。

    f:id:Sukinakoto:20170813192002p:plain左上の赤いバッテンボタンをクリックして閉じましょう。

  4. アプリケーションフォルダを閉じる

    f:id:Sukinakoto:20170813193438p:plain


    左上の赤いバッテンボタンをクリックして閉じます。
  5. VirtualBoxの仮想イメージファイルを閉じる
    dmgファイルのことがまだちゃんと理解できないでいるのですが、
    VirtualBoxdmgファイルの中に、
    VirtualBoxインストーラーを起動するメニュー(私はインストーラーは捨てちゃったのでもう呼び出し先が存在しませんが)や、
    Macのアプリケーションフォルダへのショートカットや、
    ・pdf形式のVirtualBoxのユーザーマニュアル
    などが入っているのだろうと推察します。

    f:id:Sukinakoto:20170813193306p:plain


    こちらも左上の赤いバッテンボタンをクリックして閉じます。

これで、やっとローカル端末も電源を落とせますよ。
初めてのMacBookで初めてのはてなブログを書きながら初めてのVirtualBoxを入れる。
長い2日間でした。

VirtualBoxに入れたCentOS7を最新にする

細かい話は分かっていないのですが、
Windows端末をセットアップした時も、最後にWindows Updateを掛けるように、
CentOSでも諸々を最新にする操作が必要なんだろう
というざっくりとした理解の元、噂に聞く yumコマンド を実行します。
yumコマンドの詳細は後で調べるとして、とりあえず最低限だけ。

# yum -y update


-y : 問い合わせがあったときにすべて「y」と答える
update : パッケージをアップデートする

Linuxコマンド集 - 【 yum 】 パッケージを取得してインストール/アップデートをする:ITpro

では、やってみます。
ファイヤーウォールの設定をいじっていないので、その辺で詰まったりしないといいのですが…

f:id:Sukinakoto:20170813185525p:plain
2,3走り始めましたね。このまましばらく放置です。

f:id:Sukinakoto:20170813190600p:plain終わりました!


yumコマンドについてはこちらのサイトが初級編的な解説をして下さってそう。

eng-entrance.com

Macのターミナルを開く方法

Mac初心者なので、WindowsでのコマンドプロンプトMacではどうやって出すのか知りません。
というわけで調べました。

Finderを起動して、
「アプリケーション」の「ユーティリティ」の「ターミナル」
をダブルクリック。

f:id:Sukinakoto:20170813182411p:plain

f:id:Sukinakoto:20170813182427p:plain出せた!
ターミナルを閉じるには「exit」コマンドを入れればいいのかな?と思ったのですが、どうやら違う模様…

f:id:Sukinakoto:20170813194438p:plain


左上の赤いバッテンボタンをマウスでクリックして閉じました。

今回お世話になったのはこちら↓

blog.codecamp.jp