Sublime Text2でJavaScriptするなら導入オススメのパッケージ

Best javascript sites

今週はJavaScriptの講義もやるってことで、Sublime Text2上でJavaScriptでの開発をするときにいれておくと役に立つパッケージを紹介します。

Sublime Linter

構文のチェックに役立つ拡張機能。jslintとNode.js必須

HTML5

HTML5のスニペット等

JQuery

JQueryの自動補完をしてくれる

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

Zen-Coding(Emmet)で爆速コーディング

20121909 0

先日の「Sublime Text2のインストール方法」という記事にも書きましたが、Sublime Text2などZen-Codingの拡張機能が出ているエディタを利用している場合はコーディングにZen-CodingやEmmetを利用することで、コーディングの速度を上げることができるので、HTMLやCSSに慣れてきたらこれを導入することもいいことかもしれません。

この記事の中でも書きましたが…

「わざわざエディタを使わなくても・・・」という声もあるかもしれませんが、Sublime Text2+ZenCoding(emmet)でのコーディングは慣れてくるとだいぶ作業が楽になります(慣れるまでのハードルも高いが)。今ままで一本30分かかっていたHTMLが20分でできるようになれば…あいた10分でまた更にいろんなことができるし、スキルアップの勉強もできる!!いいことだとは思いませんか?

速度をあげることでコーディングの質もだんだんと一緒にあがっていくかと思いますよ。

そんな Zen-Codingにあたらしいバージョンである「Emmet」が登場しています。

→Emmet — the essential toolkit for web-developers

現在対応しているエディタは以下の通りです。

  • Eclipse/Aptana
  • Sublime Text 2
  • T

  • extMate 1.x
  • Coda 1.6 and 2.x
  • Espresso
  • Chocolat (available via “Install Mixin” dialog)
  • Komodo Edit/IDE (available via Tools > Add-ons dialog)
  • Notepad++
  • PSPad
  • textarea
  • CodeMirror2
  • Brackets

まだ正式版ではないので、いろんな不具合もあるかもしれませんが、機会があればためしてみるのもいいかもしれないですよ。

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

Sublime Text2のインストール方法

20121208 0

今日のデモで自分が使ったSublime Text2に興味を持った生徒が何名かいたので、Sublime Text2について簡単に説明します。

エディタってなに?

エディタというとプログラマが使うソフトというようなイメージがあるかおしれないですが、コーディングの仕事も結局はキーボードからパソコンに対して文字を打ち込んでなんらかのファイルをつくる仕事ということで・・・エディタとはテキスト入力にだけ特化したソフトウェアで、軽快な動作と編集のしやすさに集中したツールです。また、利用する人にあわせてのカスタマイズ性も高く、この業界では「この軽さがいい!!」「手に馴染んでしまった」と、エディタを利用する人も少なくはありません。

「わざわざエディタを使わなくても・・・」という声もあるかもしれませんが、Sublime Text2+ZenCoding(emmet)でのコーディングは慣れてくるとだいぶ作業が楽になります(慣れるまでのハードルも高いが)。今ままで一本30分かかっていたHTMLが20分でできるようになれば…あいた10分でまた更にいろんなことができるし、スキルアップの勉強もできる!!いいことだとは思いませんか?

Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
コーディングが早くなる!?噂のSublime Text 2を入れて初期設定をしてみた。

Sublime Text2とは

Sublime Text2とは、そんなエディタの中でも割と後発のソフトですが、最近になって急激に利用者が増えてきました。有償のソフトでありながら試用期間などは特になく、たとえ購入しなかったとしても不定期に「よかったら購入してね」という旨のメッセージが表示されるだけです。

さて、このSublime Text2の使い方ですが、今回はインストール方法を説明します。

Sublime Text2のインストール方法

まずはSublime Text2のサイト「http://www.sublimetext.com/」にアクセスします。画面の中ほどに「Download for …」という水色のボタンがあるので、これを押すと自分のパソコンにSublime Text2のファイル一式がダウンロードされるので、あとはインストーラーを実行したり、アプリケーションフォルダにドラッグ&ドロップするだけでインストールが完了します。また、初期設定はSublime text2 > Preference > Setting Userで開かれたファイルを編集します。

Package controlを導入しよう

インストールしただけではまだSublime Text2のパワーを使いこなしているとはいえません。まずはpackage controlを導入しましょう。メニューからView > Show Consoleを選択すると画面の下に枠が開くので、その枠内に以下のコードを入力(コピペ)してください。

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

その後、Sublime Text2を再起動(終了させて再度起動)するとPackage Controlが導入できているはずです。

Packageの導入

Sublime Text2はPackageと呼ばれる拡張機能を導入することで一気に使いやすくなります。みんなの利用しようとしているZenCoding(emmet)もここからインストールします。

Command + Shift + pを押すと以下の様な画面が開きます。

20121208 1

ここで「Package」と打つとPackage Control関係のコマンドが表示されるので「Package Control:Install Package」を選んでEnterを押すます。

すると、いろんなPackageが表示されるので、ここで「emmet」と打てばemmetのインストールをすることができます。

まずはemmetを導入しましょう。

emmetの使い方についてはまた後日…

多和田さん紹介「Sublime Text2の基礎」(ドットインストール)

その他)
【超オススメ】Sublime Text2を導入しよう!!

ちなみに・・・普段はviの自分でした。乗り換えるかどうかはもうしばらく使ってからかな?

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

【超オススメ】Sublime Text2を導入しよう!!

20121124 0

もうじき講座の中でJavaScriptを扱い始めます。Dreamweaverで書いてもいいかもしれないけれども、手に馴染むエディタってのもあってもいいかもしれないので、Sublime Text2を紹介しておきます。

Naverまとめにも「【超オススメ】Sublime Text2を導入しよう!!」というまとめをつくっておいたので是非参考にしてください。

テキストエディタってなんだ?

実際には講座で利用しているDreamweaverも、HTMLというテキストファイル(HTMLファイル)を制作するためのエディタであるのですが…サイト制作をするために必要とされる機能をあれこれ入れているために若干「重い!!」と思うこともよくありますよね。作業中にもメモリ不足でたまに再起動をしている方もいるので、HTMLやCSSに慣れてきたら「軽い!テキストエディタ」を入れて作業するのもいいかもしれません。

特にこれからJavaScriptの講座が始まるにあたってはDreamweaverでコーディングするのもいいかもしれないけれども、自分の手に馴染んだエディタを入れておくのもいいかもしれませんよ。

【超オススメ】Sublime Text2を導入しよう!!

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

gistに挑戦!?

20121113 0

いきなりGitHubでは初心者にはハードルが高すぎたので、ソースコードの評価にはgistを使うことにしました。これでもどうかとも思う面もあるけれども、こういうツールを初心者のうちに使っておいたというのはいつかきっと財産になるはず!!

と、信じて頑張ってみるです!!

こんな感じでコードも表示できるし。gist便利っすよ♪

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

GitHub導入、なんとかなってしまった?

20121105 0

「いきなり導入して大丈夫だろうか?」と思いながらGitHubの導入をした今日でしたが、やってみると思った以上に問題もなくすんなりと導入されてしまい、自分の方がなんだか拍子抜けでした。とは言っても、設定が終わっただけで、トラブルはこれからなんだろうけど、みんなで一緒に導入していければとなんとかなってしまった現状にワクワクしています。

「スキルを身につけてもらいたい!!」と、基本を繰り返し繰り返ししてきたこの講座ですが、こうして新しいことをやると、その瞬間はみんなが楽しそうにしていますね。

「明日も何か新しいことしようかな?」と話したら「いっぱいいっぱいなので勘弁してください」という答えがあったけど(^^;

適度に新しいことを挟みながらやっていきましょうかね。

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

GitHubを導入するべきか…しないべきか

Github

先日からずっと頭を抱えていたのが「生徒のみんなの書いたコードを評価する仕組みをどうしよう」という事でした。講座開催時には「各自のトップページから毎日の演習へのリンクを貼り」という形で動いたのが、実際にはなかなかうまく実現できず、かと言ってその都度出来上がったHTMLをメールで送信させるというのも、評価結果を全員と共有できないので…と、悩み継続中ですが、スタート時に「GitHub使おうかな?でも初心者にはターミナルではハードル高いだろうな」と悩んだGitHubに思考が戻りつつあります。

というのも、この記事!!

黒い画面とかよくわからない人のための、ゆるふわgit入門 ~github for Windows~

あ、ターミナル使わなくてもいけるじゃないか!!(^^;

と言うことに今頃ひらめいたというわけで、今日は他の講師の方々とGitHubを試験利用中(^^v

20121103 1

ファイルのバージョン管理というより講師や生徒それぞれ皆でお互いのコードにコメントいれあったりして、スキルアップできるので、この休み期間中にいろいろと試してみます(昼ぐらいまではBacklog使おうかと思ってたけど)

Webクリエイター育成事業in沖縄

参考になる記事もいろいろとメモっておきます!!

GitHubはリアルRPG? そして、ソーシャルコーディングへ

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常

Sublime Text2を使おう?

20121030 0

先週の留守中に紹介されたとかでいつの間にか受講生の中でも利用者が増えてきた「Sublime Text 2」。これについては授業の中では特に時間を設けることはしませんが、指に馴染んだエディタというのはこういう作業の中でも非常に大事な部分を占めてくるので、このブログで紹介します。

Sublime Text 2ってなに?

Webクリエイター育成講座の受講生を対象にしたブログなので、詳しい人は「そんなの書かれなくてもわかっているよ」と言うかもしれないですが、現在みんながコーディングに使っているDreamweaverも大きくまとめてしまえばHTMLやCSSを書くための「エディタ」と言われるソフトで「Sublime Text 2」も、このエディタの一種です。画面を見てもわかるようにメニューも英語で拒否反応を示す人もいるんじゃないかとも思うけど、Sublime Text 2はDreamweaverと比較しても「文章(コード)を書く」という事に特化しているので、軽くて早いというメリットがあり、Dreamweaver程サイト制作に親切ではないけれど、身体に馴染んでしまえばこっちのほうが断然オススメというツールです。

Sublime Text 2

興味のある方は↑からダウンロードしてセットアップしていきましょう。 時間のあるとき等にこのブログでも操作方法をちょこちょこ書いていければと思っています。

強力なプラグイン

Sublime Text 2はプラグインで機能拡張することができます。プラグインを導入するにはViewからShow Consoleを選択して、画面下部に開いたウィンドウに以下のコードを記述して[enter]を押してください。

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

これをコピペして設定がすんだら再起動します。

YouTubeチャンネル登録をよろしくお願いします→すずきたかまさのゲーム実況

動画チャンネル

すずきたかまさのはいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況
沖縄中国語・韓国語教室/みえちゃんねる

その他ブログ

はいさい沖縄
すずきたかまさ(はいさい沖縄)ゲーム実況(ニコ生)
沖縄中国語教室日誌 沖縄で中国語&韓国語を教える中国嫁の日常