著者:asaba
【atom】atom付属のパッケージを少しかじってみた
最近になってatomというエディタを使い始めました。
というのも、今まではterapadとかサクラエディタとか一般的にポピュラーなものを使っていたのですが、一時期エクリプスでアプリを開
発してから双方のエディタのギャップが大きすぎて、「ノーマルなエディタじゃ嫌だ！javascriptで開発している時もエクリプスみたいな
色々な機能がほしい！」
という我儘を言って無理やりatomに乗り換えました。
このatomは、パッケージが非常に豊富で、お好みのパッケージをインストールすることでオリジナルのエディタにカスタマイズすること
もできます。chromeでいうアドオンのようなものになります。
センスによっては今どきのIDEより使い勝手の良いエディタに化けることもでき、柔軟性のあるエディタとして世界中で使われている
みたいです。
ここではサンプルとして、autocomplete-pathsのインストール法と使い方を記載しておきます。
autocomplete-pathsとは、ファイルパスを予測してそれを追加してくれる機能です。画像やhtmlなど、手打ちで打つと非常にめんどく
さいプロパティを予測して保管してくれるので、使いこなせば開発効率の向上に貢献してくれると思います。
それでははじめていきます！まず、fileタグを選択ー＞settingを選択すると、下記の画面に遷移すると思います。
ここで一番下のinstallボタンを押すと、下記のような画面に遷移します。
上の検索欄で、autocomplete-pathsとコピペすると、おそらく一番上に出てくると思われるのでこれをインストールしていきます。
間違いないことを確認したら、青色のInstallというボタンをクリックします。するとインストールが始まりますので、終了まで
待機していてください。
Installが成功すると、Uninstallボタン・Disableボタンが表示されているのが分かります。これでインストールは終了になります。
さて、インストールができたら早速imgタグで試してみましょう。
srcと入力すると、候補にsrcと出てくるのでそれをクリックします。すると、今いるディレクトリにあるファイルを
全て保管して表示をしてくれます。（画像参照）
このファイルには一つしか画像を持たせていませんが、表示させたい媒体が
多い時ほどこのパッケージの威力を感じるのではと思います。
一つ注意点ですが、./から始めると保管してくれないので、必ず一からsrcと書くのがポイントになります。これさえ守れば快適に
atomを使えるので、細かいですが頭の隅に入れておくと悩まなくて済むと思います。
以上でパッケージ紹介とその使い方のレクチャーを終了します。またお気に入りのパッケージが見つかったら随時紹介していきたいと
思います。
著者:takahashi
VSCodeにも付属するVisual Studio LiveShareがめちゃくちゃ便利だった件
自分が普段から愛用しているエディタ Visual Studio Code ですが、その機能に”Visual Studio LiveShare”という機能があります。
Visual Studio Live Share – Microsoft
どんな機能なのかはリンク先を見ていただければわかりやすいかと思います。
簡単に説明すると、Googleドキュメントやスプレッドシートのようにエディタ画面をリアルタイムで他の人に共有したり、共同編集したりできる機能です。
MSアカウント、またはGitHubアカウントが必要ですが、無料で利用することができます。
VSCodeで利用する場合、下記の手順でLiveShareを利用できます。
VSCodeの左側のアイコンが並んだバーに、画像赤枠のアイコンがあると思うのでこれをクリックします。
すると画像のような選択肢が出てきます。
LiveShareを使う際、ホスト(参加される側)とゲスト(参加する側)で操作が異なります。
ホスト側の場合は”Start collaboration session”を選択します。
まだログインしていない場合はログイン画面が出てきます。
MSアカウントかGitHubアカウント、所有しているどちらかのアカウントでログインします。
ログインが完了すると、下記のメッセージが表示されます。
この時点で、自分の開始したLiveShareセッションに参加するのに必要なURLがクリップボードにコピーされます。
もしクリップボードから消えてしまった場合は、上記メッセージの”Copy again”をクリックすると再度コピーできます。
なお、”Make read-only”を選択すると、ゲスト側ユーザーからの編集を禁止することができます。
一方ゲスト側は下記の手順で参加できます。
ゲスト側の場合は先程の画面で”Join collaboration session”を選択します。
すると、ホスト側でセッションを開始した際に発行したURLを入力する欄が出てきます。
ホスト側の人から受け取ったURLをここに入力することで、LiveShareセッションに参加することができます。
また、リンクをブラウザで開いてもLiveShareに参加可能です。
この機能、ほかの人と共同でプログラミングしたり、助けてもらったりする使い方の外に、先生が生徒にプログラミングを教えるときに利用したり、URLを公開して一般の人にプログラミングの風景を見てもらうこともできますし、またPCを複数台持っている人は、LiveShareさせることでGitなどで同期させることなく、同じ環境で操作することもできます。
とても便利な機能なのでVSCodeをお使いの皆さんは是非一度試してみてください。
著者:杉浦
PhpStormの何でも屋コマンドAlt+Enter
インテンション・アクション – 公式ヘルプ | PhpStorm
自分が使っているIDEのPhpStormにはAlt+Enterというとりあえず使おうという意味合いのショートカットキーがあります。Alt+Enterコマンドはカーソルを合わせた場所に合わせた何でも屋の様なコマンドです。操作名はインテンション・アクション、公式の説明はPhpStormの提案を実行する、ととてもふんわりしています。インテンション・アクションはふんわりとした分様々なことを行ってくれます。
Alt+Enterから実際よく使う動作としてスペルミス、インポート、PHPDoc補完があります。波線が現れたらとりあえずAlt+Enterしてみるぐらいでちょうどいい塩梅で、PhpStormがかくあるべしというコードを教えてくれます。
PhpStormという名前ですが縁があるくらいの他言語、例えばSQLのコマンドでも同じように有効です。識別子で修飾はスキーマ名やテーブル名を修飾してくれます。
著者:takahashi
VSCodeでAdobe BracketsのようにHTMLの編集結果をリアルタイムで表示可能にするプラグイン”Live Server”
以前使ってたAdobe Bracketsというエディタでは、HTMLを変更すると、その変更を即座にブラウザに反映し、リアルタイムに編集結果を表示してくれる”ライブプレビュー機能”を搭載しています。
流石Webを開発することに重点を置いているだけはあります。
HTMLベースのWebページを作るときはとても重宝する機能です。
以前はファイルを保存するまでは反映されなかったのですが、現在は保存しなくてもリアルタイムで反映されるようになっています。凄いですね。
ということで、VSCodeに乗り換えてからも同様の機能が使いたくて、プラグインを探していたのですが、ついに発見しました！
Live Server – Visual Studio Market Place
Live Serverというプラグインです。
現在のAdobe Brackertsのようにリアルタイム反映はできませんが、ブラウザと連携し、ファイルを保存するごとにページを自動更新してくれる機能を持っています。
インストールをすると、VSCodeの右下に”Go Live”というボタンが出現します。
ここをクリックすると…
内部サーバーの起動と同時にデフォルトのブラウザが立ち上がります。
あとはそのままHTMLソースを編集し、変更を保存すると
こんな感じで、更新するたびに即座にブラウザの方で更新が入ります。
とても便利なので、VSCodeでWebページのコーディングをされている方は是非一度試してみてください。
著者:takahashi
もう閉じ括弧を見失わない！ VSCodeプラグイン”Bracket Pair Colorizer”
プログラミングあるあるの一つに、閉じ括弧が複数あると、どの閉じ括弧がどの開き括弧と対応しているかがわからなくなってしまうことがあります。
勿論、ちゃんとインデントを付けていれば起こりづらい問題ではありますが、コードをコピペしたり、新しくブロックを増やしたりした際などに、一時的にインデントが崩れ、どの括弧がどの括弧に対応しているのか見ながらインデントを調整する作業が必要になってしまう場合があります。
そんな時はコードエディタの機能を使うことで作業がとても楽になります。
今回はより括弧の対応をわかりやすくしてくれるVSCodeプラグインをご紹介したいと思います。
とりあえず括弧を出したいがためにｸｿコードを書いてますが悪しからず…
Bracket Pair Colorizer – Visual Studio Market Place
Bracket Paie Colorizerは対応する括弧ごとに違う色を付けることで、どの閉じ括弧がどの開き括弧と対応しているのかを分かりやすくしてくれるプラグインです。
こんな感じに、インデントを一切付けない状態でも、括弧の対応が色でわかります。
また、対応していない括弧があれば、赤色で表示してくれます。
また、対応する括弧同士を縦線でつないでくれるので、たとえインデントがずれてしまったとしても
どの括弧と対応しているかを一目でわかる形で表示してくれます。
複雑なコードをよく書いていて、しばしば括弧の対応がわからなくなってしまう…という方は是非試してみてください。
著者:takahashi
使い方がわからないPHP関数の公式ドキュメントを一瞬で表示してくれるVSCodeプラグイン”PHPDocument”
シンプルだけど、PHPでプログラミングしているときにめちゃくちゃ役に立つVisdualStudioCode(VSCode)向けプラグインを見つけました！
PHPDocumentというプラグインです。
使い方もとてもシンプル。
使い方がわからない関数の上で右クリックして、コンテキストメニューから”PHP Document”をクリックするだけ。
こんな感じで、一瞬でPHP公式ドキュメントの当該ページをエディタ内に表示してくれます。
PHPの関数にはかなりたくさんの種類があり、「この関数ってどんな使い方だったっけ…」という場面が結構あるので、いちいちブラウザを開かずに検索できるのはシンプルだけどとてもありがたい機能です。
なお、デフォルトでは英語のドキュメントを表示しますが、複数の言語にも対応しており、VSCodeの設定の
PHPDocument: Language
の項目から言語を選択できます。
ちゃんと日本語も利用できるようになっているのは嬉しいですね。
PHPでプログラムをされる方は是非一度試してみてください。