シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > GithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件!
注目記事ピックアップ
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/10/31 22:40

GithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件!

github_atom_01
どうも、まさとらん(@0310lan)です!

みなさんは、GitHubが提供する「Atom」というエディタをご存知でしょうか…?

プログラミングの学習から、Webアプリの開発まで幅広く利用することが出来るわけですが、驚くべき点は…その「拡張性」の高さにあります。

今回は、「欲しい機能」を簡単にエディタへ組み込むことが出来るその魅力を、厳選してご紹介しようと思います!


プログラミングの「学習」から「開発」までをサポートしてくれる!
github_atom_02_2
「Atom」は、Windows、Mac OSX、Linuxなどで利用可能な無料エディタですが、インストールしたばかりだと普通のエディタと変わりません。

そこで、スマホのアプリみたいなノリで、必要な「機能」を追加していくことが出来ます。

例えば、
プログラミング中に、「配列内の要素を並び替えるにはどうするんだっけ…?」というケースがあったとします。
そんな時に【Ask Stack】という機能を追加します。

すると、画面上に知りたい内容を入力できるウィンドウを表示することが出来ます。
github_atom_03


入力すると、世界中のエンジニアが意見交換するサイト「Stack Overflow」での回答内容が直接エディタ内で見れるようになるのです。
github_atom_04


しかも、サンプルコードをボタン1発で貼り付けてくれる機能まであるので便利!
github_atom_05


「正規表現」などを使う場合には、【regex railroad diagram】を利用すれば、とても分かりやすく「図式化」してくれます。
github_atom_06


ある程度、コードが完成したら【minifier】を使ってみましょう!
github_atom_07


JavaScriptやCSSなどを極限まで圧縮し、「高速化」してくれます!
github_atom_08


また、ちょっとしたコードを書いている途中で、すぐに実行結果を見たい場合は【atom runner】を使うと実現できます。
github_atom_09
現在…、JavaScript、CoffeeScript、Ruby、Python、Go、Bash scriptsに対応しています。


本格的に、ターミナルからの作業が必要になったら【term2】を使うと、エディタ内でコマンド操作を実現できます。
github_atom_10
自分のローカルPCと繋がっているので、ココからすべてのファイル操作も可能です。

コマンド操作が出来ると、Railsのようなフレームワークを使った開発も「Atom」だけで作れるので、いちいちターミナルに切り替える必要が無くて良いですね。


もちろん、【web view】を使ってURLを入力すると…、
github_atom_11


普通のブラウザとしても機能します!
github_atom_12
そもそも「Atom」は、Google Chromeのベースとなっている「Chromium」で作られているので、ブラウジングがエディタ内で出来るのは当然かもしれません。(ちなみに、デベロッパーツールもそのまま使えます…)


コードの管理は、【Git Log】などを利用すると…かなり効率的です。
github_atom_13
さすがに、Git系の機能拡張は豊富に揃っているので、ご興味ある方は覗いてみると良いかも…。(参考


欲しい機能を追加するのは、驚くほど簡単で便利!
さて、とても便利な「機能拡張」ですが、誰でも簡単に組み込めるように設計されているのも魅力の1つです。

まず、エディタの「設定画面」を開きます。
github_atom_14


そして、「パッケージ」の項目にある検索ボックスに、例えば「git」と入力して検索すれば、関連する機能一覧が表示されます。
github_atom_15
あとは、ここから好きなモノを選んで「Install」ボタンをクリックするだけでOK!
簡単ですね。


ちなみに、エディタが無くてもブラウザから専用サイトにアクセスすれば、同じように機能一覧を見ることが出来ます。
github_atom_16
「人気の機能」や、「最新の機能」なども合わせて見れるので、どんな機能が実現できるのかをあらかじめ確認することも出来るでしょう。

他にも、ベジェ曲線をグラフィカルに描ける【bezier curve editor】や、色の指定をGUIで選択できる【color picker】、日本語周りの不具合を修正してくれる【japanese wrap】などは必須かもしれません。


おまけ
最後に、「Atom」を提供しているGitHubで、現在も公開されている究極の「時間泥棒ゲーム」を合わせてご紹介しておきます。

GitHubにソースコード公開中の「時間泥棒確定ゲーム10選」の猛者たちがスゴすぎ!
github_atom_17
まず、実際に遊んでみてから、今回ご紹介した「Atom」のようなエディタを使って、実際にソースコードを分析してみると良い勉強になりますよ。


まとめ
「Atom」は、2014年に公開されたばかりの新しいエディタなのに、今回ご紹介したような多彩な機能が日々公開され続けています。

世界的に「github」がみんな好きなのかどうか分かりませんが、驚くほど活発なエディタではないでしょうか。
こんな短期間に、よくこれだけの機能が拡張されているなぁ…と、感心せずにはいられません。

このまま進化を続ければ、ひょっとしたらトンデモナイ優良エディタに化けるかもしれませんね…。


written by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る