トップ > markup > マークアップのあれこれ#1

マークアップのあれこれ#1

markup

SublimeText3の導入とか

動機

サーバ運用事業から抜け出しまして、フロントとバックどっちもやるWebエンジニアになりました。
前職のようにシフト制でないので残業が当然のように発生しますが、これも覚悟の上で選んだ道。
技術を身に付けたかったのです。

正直Web系言語はそこまで触ったことがないので積極的に学んで行きましょう。
（元はロッテ福浦に毛が生えた程度のC#er）
（メニューと表示部分割するとしたらどうする？って聞かれてframeって言ったくらい知識が化石）

開発環境を整える

せっかくなので職場の環境に揃えます。
デバッグに使うブラウザはIE, chrome, firefoxでこれらは導入済み。
エディタはSublime Text 3を使用しているのでこちらを導入し、プラグインを整えて行きます。

環境
Windows7 64bit Pro
Sublime Text 3 Build 3126

Package Control

ST3のパッケージを管理するパッケージ。Nugetみたいなものでしょうか？
こういうのは最初にインストールします。
（packages managed by the package）

多くの導入マニュアルでhttps://packagecontrol.io/installationのインストールコードを入力するようにという指示が出されていました。
（Pythonのコードらしい、さっぱりわかんないや）
そんな俺のために下の方に解説が書かれていました。

This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. The download will be done over HTTP instead of HTTPS due to Python standard library limitations, however the file will be validated using SHA-256.

「Installed Packagesフォルダを生成し、その中にPackage Control.sublime-packageをダウンロードします。
Pythonの標準ライブラリの制限のせいでHTTPSが使えないからHTTPでダウンロードするけど、SHA-256を使ってちゃんとチェックするよ」
という中学2年生でも読める英語で丁寧に書いてありました。
しかし、2017/5月現在、Package Controlのインストール時に上記フォルダとファイルが自動で生成されるようになっています。
せっかくなのでSHA-256でハッシュをチェックしてみます。

上がPackage Controlインストール時に C:\Users\[ユーザ名]\AppData\Roaming\Sublime Text 3\Installed Packages に自動生成されたもので、
下がhttps://packagecontrol.io/installation に存在するファイルのものです。

FileName: Package Control.sublime-package
FileSize: 268 KB (275,309 bytes)
ModifiedDate: 2017-05-12T00:15:23+09:00
SHA256: df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76

FileName: Package Control.sublime-package
FileSize: 268 KB (275,309 bytes)
ModifiedDate: 2017-05-12T00:16:29+09:00
SHA256: df21e130d211cfc94d9b0905775a7c0f1e3d39e33b79698005270310898eea76

見事に同一のものでした。
ということで、インストールコードの入力は一切必要ないんですね。

他に入れたパッケージ

  • Japanize: 日本語化
    • インストール後に表示されるマニュアルどおりに操作しないと完了しない
  • SFTP: ファイルを更新したと同時にFTPでアップロードしたり
    • サイドメニューのフォルダを右クリック→"SFTP/FTP"→"Map to Remote"
    • FTP, SFTP, FTPSから選べます
  • All Autocomplete: 入力補完
    • ST3にも元々ある機能だけどそれを補強, 定義元のファイル名を表示したり
    • Intellisenseに遠く及ばない
  • TrailingSpaces: 不要な半角/全角スペースをハイライト
    • 控えめに言って神
    • というのも既に全角スペースの事故を起こしています
  • IMESupport: 日本語入力時、エディタの現在行に擬似インライン表示されるようにする
    • 必須
  • SublimeLinter: リアルタイム構文解析, Linter系の本体
    • 必須
    • SublimeLinter-html-tidy, SublimeLinter-csslint, SublimeLinter-jshintも導入（後述）
  • BracketHighlighter: タグに対応する閉じタグをより分かりやすく表示する
  • Color Highlighter: カラーコードにポインタを合わせると実際の色が背景色として表示される
    • 結構便利そう
  • View In Browser: ctrl+alt+vでブラウザを開く
    • ブラウザにフォーカス当ててF5押すのめんどくさかった
  • Local History: 自動バックアップ
    • 念のため

Linter系の導入

ちゃんと公式のマニュアルを読みます

SublimeLinter

Package Controlからインストールするだけでok
→ST3を再起動する

これが本体で、後は各言語用のパッケージをインストールしていきます。
構文解析を行うファイルはパッケージとは別に用意する必要があるようで、
Linter系のパッケージはインターフェースに過ぎないもののようです。
（推測）

SublimeLinter-csslint

CSS用のLinter系パッケージ

GitHub - SublimeLinter/SublimeLinter-csslint: SublimeLinter plugin for CSS, using csslint.
マニュアルの通り、node.jsをインストールします。
必要なのはnode.jsそのものというより、node.jsのパッケージ管理ツール(npm)の方。

せっかくなので安定版のv6.10.3をインストールします。
インストーラ形式であればパスを環境変数に通すかどうかの項目が選べてとても楽なので、そちらを実行しました。

npm install -g csslint

コンソールで上記のコマンドを入力するだけでcsslintのインストールが完了します。
（-g: グローバルインストールするオプション, cdの指定するのめんどくさいんで付けます）

これが終わって初めてSublimeLinter-csslintのインストールを始めます。
これはST3内のPackage Controlでインストールするだけ。

csslint（構文解析をするファイル）に無事パスが通ってれば、
ST3のコンソールに「SublimeLinter: jshint activated」とか表示されてるはずです。
windowsのコンソールに「csslint -v」とか打ってバージョンが表示されるかどうかでも確認できます。

SublimeLinter-jshint

js用のLinter系パッケージ

SublimeLinter-csslint同様、npmで構文解析パッケージをインストールしてからST3の方のパッケージをインストールします。

npm install -g jshint
SublimeLinter-html-tidy

html(html5)用のLinter系パッケージ

こちらはnpmの管轄外である構文解析ファイルを使用します。
安定版であるtidyか、html5も対象にしている実験的なtidy5があるそうです。
いろんなサイトに点在しててどれを入れるべきか分からないので一つずつ辿っていきます。

公式サイト: http://tidy.sourceforge.net/
→公式から貼られているgithub内のリポジトリ: https://github.com/htacg/tidy-html5
→リポジトリ内で貼られているバイナリへのリンク: http://binaries.html-tidy.org

上記ページのバイナリをダウンロードします。
このバイナリへのパスを自分で通す必要があるので通す前に、適切なフォルダに移動しておきます。
とはいえどこが適切なのか考えるのが面倒だったので、Program Files下にtidy-5.4.0とリネームしたフォルダを移動し、パスを通しておきました。
俺の環境ではtidyに関してはOS自体の再起動が必要でした。

無事パスも通ったのでST3の方のパッケージをインストールし、activatedになっていることを確認して終了。

SublimeLinterの設定

本体の設定。

最低限、ユーザー定義の方で "debug"=true にしとけばいいかな

ST3になって不要になってそうなパッケージ

各導入サイトで人気だったけどST3の最新版で既に実装されている機能たち

  • Goto-CSS-Declaration: CSSの定義部分に飛ぶ/定義ファイルの何行目かを表示する
  • Tag: 閉じタグの入力補完
  • SnippetMaker: スニペットの作成とその管理

先輩から本を借りた

（書籍購入費浮いた）

  • よくわかるHTML5+CSS3の教科書第二版
    • これが初心者向けで
  • HTML5マークアップ 現場で使える最短攻略ガイド
    • これがある程度ベースがある人向けらしい

しばらくはこれを軸にお勉強していきます。

Visual Studioって神だわ

早くもIntellisenseで静的言語のコーディングがしたいと思いました。
（住めば都を信じる）

全然関係ない話

ここたまの劇場版を見に行きたいのですが、学生どころか社会人が一人で女児アニメ見に行っていいものかとここ一週間ずっと悩んでいます。
なんと本日土曜日が日中ずっと雨らしいので見送る口実ができてしまいました。
（迫り来る日曜日の決断）

あと、母の日ということでカステラを送りました。
こういう特別な日に何かしてあげたという記憶がなかったので喜んでくれるといいな