TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Atomエディタで快適にJavaScriptの開発を行うための設定を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

Atomエディタで快適にJavaScriptの開発を行うための設定を現役エンジニアが解説【初心者向け】

初心者向けにAtomエディタで快適にJavaScriptの開発を行うための設定について現役エンジニアが解説しています。Atomとはオープンソースで開発、提供されているエディターです。Atomのインストール方法や日本語化、JavaScriptの開発のためのプラグインのインストール方法を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Atomエディタで快適にJavaScriptの開発を行うための設定について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

Atomエディタで快適にJavaScriptの開発を行うための設定について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

Atomとは

Atomとはオープンソースで開発、提供されているエディターです。

公式サイトからダウンロードできます。ご自身の環境に合わせたインストーラーをダウンロードして、インストールをして下さい。

Atomはサードパーティーにより沢山のプラグインが開発されているので、自身の目的に合わせてカスタマイズを自由に出来るところが魅力です。

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScript開発のための設定

Atomには、JavaScript開発に適したプラグインも沢山出ていますのでご紹介してきたいと思います。

まずは、日本語化から行いましょう。

  1. 「File」→「Settings」をクリックし、表示されたページの「Install」を選択
  2. 右側の『Search packages』に”japanese Menu”を入力して「Packages」をクリックして検索
  3. 「japanese Menu」が出てきますので「Install」をクリック

これでメニューの日本語化が完了します。標準でHTML/CSS⁺JavaScriptの編集は十分に行うことが出来ますので、まずは初めて見ましょう。

JavaScript開発のためのプラグインの導入

標準で十分ではあるのですが、さらに便利になるプラグインを紹介したいと思います。

HTML/CSS⁺JavaScriptを単独でそれぞれの編集を行うのは標準で十分ですが、IDEとして利用するには便利なプラグインがありますのでご紹介したいと思います。

  1. 「atom-ide-ui」をインストール（AtomでIDEのプラグインを利用するための基本になるもの）
  2. 「atom-ide-JavaScript」をインストール

これで利用できるようになります。このほかにも「ide-html」「ide-css」もインストールしておくことをお勧めします。

おまけに「Minimap」をインストールしましょう。右側にコード全体が表示され今現在どのあたりを修正しているのかが一目でわかります。まずは、このあたりから始めてみてください。

まとめ

Atomはとても使いやすく人気のエディターです。是非利用してプログラミングを効率的に行いましょう。

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptの即時関数をアローを使って記述する方法を現役エンジニアが解説【初心者向け】

JavaScriptの即時関数をアローを使って記述する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...
JavaScript

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニ

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター（現役エンジニア）が実...
JavaScript

JavaScriptのsplitメソッドを利用してURLの一部を抜き出す方法を現役エンジニアが解説【初心者向け

JavaScriptのsplitメソッドを利用してURLの一部を抜き出す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初...
JavaScript

jQueryのinArrayメソッドの使い方を現役エンジニアが解説【初心者向け】

jQueryのinArrayメソッドの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJa...
JavaScript

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでPDFファイルを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

あわせてよく読まれている記事

【Atom、Sublime、Visual Studio Code、Vimの人気エディタを徹底比較】ベストなテキストエディタはこれだ！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また本記事は、10年以上リードエンジニアとして活躍するMatt Goldspink氏によって投稿されました。   プログラム記述用テキストエディタが溢れる今日この頃ですが、そこから一つを選ぶとなるとそれは難しい問題でしょう。 「開発者にとって最適なテキストエディタは何ですか？」という質問への回答はすぐには見つかりませんが、ここでは Atom, Sublime, Visual Studio Code, Vim という4つの人気のエディタについて比較してみます。 ここでの比較が、読者のニーズに合ったエディタを選択をする一助になれば良いなと思います。   お断り：ここでのいくつかの比較は主観的であり、ほとんどが私の個人的な好みに基づいています。 私はMac用のSublimeを使用してWeb（HTML、CSS、JavaScriptなど）の記述を行なっています。そのため、評価の視点は使い慣れているものに多少傾いてはいますが、できる限り客観的に評価を行いました。   目次 Atom Sublime Text Visual Studio Code Vim   Atom Url: https://atom.io/ 費用：フリー(MIT Licence) 開発者：GitHub プラットフォーム：OSX, Windows, Linux Atomは21世紀に向けて改良可能なテキストエディタと言われています。 Atomは比較的新しいテキストエディタで、2014年に最初にリリースされて以来、多くの人気を集めています。 では、メインの機能から見てみましょう。   パッケージ 編集機能を追加できることはたいへん重要ですが、このエリアはAtomが得意としています。標準でインストールされるパッケージマネージャがこの機能を果たし、全てのパッケージはGithubで管理されています。 現在では、6,452個という多数のパッケージとテーマが利用できます。Atomにとってパッケージは基本的なものであり、プリインストールされたツリービューと設定ビューの機能でさえも単に最初から組み込まれたパッケージなのです。   編集とワークフロー Atomでは全ての機能がスムーズに操作できます。では、最大の弱点はなんでしょうか。考えた末に出てきたのは、使い始めた際にどの追加パッケージをインストールすべきかを見つけるのに苦労する点です。 例えば、私はファイルの一部分を視覚的にスキップできるミニマップを愛用しているが、この機能をセットアップするためには「オートコンプリート+」を使用して、自動補間機能を設定する必要がありました。 私はよく複数のファイルを同時に開いて作業するので多くの場合、分割ペインの編集を設定する機能は必須ですが、これはAtomがうまくサポートしてくれている機能のひとつです。 Sublimeには無いAtomのもう1つの優れた機能は、ツリービューでのファイル/フォルダのドラッグ&ドロップのサポートです。私は周りのものをシフトできる機能がSublimeに無いことを知ってはいましたが、この機能はとても役に立つのです。 最後に、gitとの統合は素晴らしいのではありますが、結局は GitHub側で構築された結果なのです。   カスタマイズ エディタを自分の開発フロー、およびスタイルに合うようにカスタマイズする機能は必須です。私は「保存する時に空白を取り除く」,「編集していないファイルを保存する」という設定をいつも使っていますが、これらを有効にしたり、無効にしたりすることは簡単に行うことができます。 Atomには優れたドキュメントが用意されており、そこにはスタイルを再設定する方法も書かれています。 私は構成設定に優れたAtomを好んで使っています。ファイルの種類ごとに設定の上書きができる機能は素晴らしい。例えばJS, CSS, HTML に別々の設定をすることはAtomでは容易なのです。   パフォーマンス Atomを選ぶ際に問題になるとすれば、それは処理速度です。 ファイルを開いたり、タブを切り替える毎に生じるタイムラグは苦痛です。（本格的な開発の編集に使っている場合には特に気になります）Atomの最初のリリースではそこが問題点であり、最近ではかなり改善されてはいますが、まだまだ不十分です。   まとめ カスタマイズを簡単に行いたいというユーザーにとってはAtomは優れたツールです。修正、追加、拡張性の自由度は大きな力を与えてくれます。ドキュメントも優れています。 私としてはやはりパフォーマンスの点が気になりますが、Atomはフリーのエディタとして光っているのは確かです。 Atomの使い方   [PR] フロントエンドで副業する学習方法を動画で公開中Sublime Text Url：https://www.sublimetext.com/ 試用するにはライセンス費70ドルが必要 開発者：Jon Skinner （前グーグル技術者） プラットフォーム：OSX, Windows, Linux Sublimeは2007年にリリースされ、ほぼ10年が経過しています。Stackoverflowの2016年の開発環境調査ではSublimeは第3位にランクされています。 V3Betaは最新バージョンで、長い間Betaバージョンのままです。気にすることはありませんが、新版はたいへん安定しています。   パッケージ 最初にインストールするSublimeのパッケージはコントロールプラグインであるようです。Sublime 3ではこれらがデフォルトで追加されていることを期待しています。 Atomと同様にSublimeでもたくさんのパッケージとテーマが用意されていますが、私にとって必要なのは次の3つです。 SideBarEnhancements：これを使わないとファイルのリネーム/移動/複製はできません。 SublimeLinter：異なるプログラム言語にlintを追加するのに必要です。 GitGutter：git 上の状態をラインナンバーの左に表示します。 Sublimeにおいても多くの(パッケージの)中から選択ことが出来ます。Sublimeのパッケージサポートは全体的によくできているのですが、最初に使い始める際に複雑な手続きがあるというのがちょっと残念な点です。   編集とワークフロー 重要なプロジェクトでは、Sublimeを使ってきました。ファイルの検索、ファイルの内容の検索は高速で簡単です。私は何百ものファイルからコードの断片を検索する作業をよく行いましたが、Sublimeの処理速度に不満を持つことはありませんでした。 Atomと同様に、Sublimeの本領はいくつかのキープラグインをインストールしてから発揮されます。正しい文法ハイライトを行うにはJSONフォーマッタ、LINTなどのインストールで時間が取られますが、一旦インストールしてしまえば再び触る必要はありません。   カスタマイズ 前述しましたが、SublimeはAtomと非常によく似ています。「フォーカスが無くなったら保存する」、「空白を取り除く」の設定も可能です。設定ファイルは簡単なJSONで書かれており、隠された全体のホストの設定があります。   パフォーマンス SublimeがAtomより優れた点として、オープニング、クロージング、検索などがたいへんスムーズで速いことがあげられます。   まとめ 冒頭に述べたように、私は長年のSublimeユーザーなので、ここでの私の意見は少しだけSublime寄りではありますが、一般的にはSublimeは柔軟性があり高速なエディタであるとされています。 2016年の開発環境のトップ3に入るだけの理由はあるのです。 Sublime Textの使い方   Visual Studio Code Url: https://code.visualstudio.com/ 費用：フリー 開発者：Microsoft Platforms：OSX, Windows, Linux Visual Studio Code(VSCode)は比較的新しいテキストエディタです。昨年(2015年4月)にリリースされていますが、すでに大きな牽引力を持っています。Microsoftはパワフルで柔軟性のあるクロスプラットフォームエディタを作り出すという大きな業績を残しました。そのプラグインは開発者からの注目を集めています。   パッケージ 他のエディタと同様に、VSCodeもよくできたプラグイン（エクステンション）を持っています。エクステンションの管理は内蔵されており、何百ものエクステンションが利用可能になっています。これがAtomでは、いくつかのものだけがデフォルトでインストールされています。 自分のワークフローに最適なプラグインを選ぶのに多少の時間はかかります。私の好きな（そして私がVSCodeで興味深く思うのは） Chrome用のデバッガです。これを使ってVSCodeの中からブレークポイントをセットしてJSをデバッグできます。 同じことはNoode.jsでもできます。つまり、JSCodeからブレークポイントをセットして、ターミナルのノードプロセスが走っている状態でステップ実行させることができるのです。   編集とワークフロー VSCodeはAtomと似たやり方でElectron、Node、HTML/CSSを使っていますが、タイムラグもなく極めて高速です。 私は、エディタを一週間使用してみて、かなり満足しました。Sublime,Atomに非常に親和性がありました。前述のデバッグ機能は拾い物でした。入力補間（最初は設定に苦労しましたが）が一日かそこらで利用できるようになりました。私はすでに引数を覚えていなくても、関数名を入力することに関しては達人になっていました。   カスタマイズ 前述の2つのエディタのようにVSCodeにもカスタマイズ機能はあります。wrapping, インデント、テーマなど必要な全ての機能が用意されています。   パフォーマンス 前述しましたが、VSCodeは(Atomと同様に)、Node.js, Electron, HTML, CSSを使って作られていますが(Atomとは違って)　明らかに高速です。起動、終了時のタイムラグも感じないし、検索も速いです。 察するところ、AtomとVSCodeの違いはUIエディタがMonaco(Visual Studio Onlineより)で作られていることだと思われます。これがパフォーマンスの違いの理由だと思いますが、とにかくパフォーマンスはSublimeと同等なのです。   まとめ 全体を見て私はVSCodeの検討結果にたいへん感激し、より継続して使うことも考えました。私は完全に乗り換えるためのステップを踏んでいる状態ですが、Sublimeと同様の設定をしてみたこの休日は楽しいものとなりました。 結局、私はSublimeを長く使い過ぎたようです。Gitとの統合、エディタ内デバッガーはすばらしい機能であり、私がSublimeを使って苦労していたことが、VSCodeを使うとあっと言う間にできてしまうのです。   Vim Url: http://www.vim.org/ 費用：フリー 開発者：Bram Moolenaar プラットフォーム：OSX, Windows, Linux 私は開発者は成長するための通過点として、プロジェクトでVi、あるいはVimを使ってみるべきだと思う。ターミナルを通してリモートサーバ上のファイルを見たり編集できることは生産的で重要な機能です。 私は多くの開発者が、SFTP、curlを使って、ファイルを再アップロードするのを見てきました。 しかし、Vimについての厳しい意見は、Vimの愛好者を苛立たせ、さらには理屈の通った怒りを買うことを私は知っています。Vimを修得する事に時間を費やしている人にとって、Vimはたいへんに生産的な環境なのですから。   パッケージ Vim　では　14,00ものパッケージを使うことができます。たとえば、木探索、文法のハイライト、テーマ設定、Gitとの統合などがあります。Vimは信じられないくらいの柔軟性を持ち、パワフルなのです。 しかしながら、上で述べた他のエディタと同様に、インストールすべき最適なプラグインがどれかを知るには、インサイダーの知識とコメントが必要です。私は人気のあるプラグインはWebサイト(http://vimawesome.com/)を手がかりとして探しています。   編集とワークフロー Vimに不慣れな人に最初に言っておきますが、Vimはコマンドラインのテキストエディタです。ダブルクリックしたり、移動のためにマウスを使うアプリとは違うのです。テキストを開く、編集する、閉じる、保存するという操作は全てショートカットを使って行います。 私が学生の頃、Viだけを使うように教えられました。 本当のVimのユーザーになるにはそれなりの覚悟が必要ですが、最後には「頭が良くなった」ような気分を味わうことができるでしょう。 正直言って、私がVim をあまり使わなくなったのは、ショートカットを充分に覚えていなかったからです。ひとつのファイルなら、検索したり、置き換えたりすることが簡単にできるのですが、これが複数のファイルとなると、途端に操作が分からなくなります。   カスタマイズ Vimは驚くほどカスタマイズできます。Googleで「.vimrc」を検索すれば、Vimの設定例をたくさん見つけることができます。Vimはいろんなことが可能なのです。   パフォーマンス Vimのパフォーマンス上の障害となるのは「ユーザー」、つまり「あなた」なのです。原理的で高速でありますが、パフォーマンスとしては、あなたがいかに速くコマンドを打てるかにかかっています。あなたがVimのパワーユーザであればVimもすごく速くなるのです。   まとめ Vimは原理的なエディタです。速い動作速度を持ち、開発環境としては充分です。ただし、辛抱強くコマンドを覚える必要があります。  VIM Adventuresというオンラインゲームがありますが、これを使ってファイル内を移動する h, i, k, l のような基本的なコマンドを覚えることができます。   最終判断 以上のエディタは各々長所、短所を持っています。個人的には私は、開発者のキャリアの中で各々のエディタについて最低1週間は何が役に立ち、何が役に立たないかを見極めるべきだと思います。これら人気のある4つのエディタを包括することは、エディターを選びなおす良い切っ掛けになると思います。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを始めようと思っている人はぜひご覧ください。
プログラミング

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Doru Ciobanu氏によって投稿されました。   jQueryはまだ必要でしょうか？ リリースから約10年が経過した現在、jQueryは、最も普及しているJavaScriptライブラリです。10年前のブラウザのエコシステムにおいては、HTMLのDOM操作の複雑さを最小限に抑えるために開発されたブラウザ同士の戦争が繰り広げられていました。 こうした状況で登場したjQueryはクロスブラウザを実現できたため、数多くのエンジニアを混乱から救ったのです。   基本的にjQueryは、粗悪なネイティブAPIに代わる新しいAPIを開発し、ネイティブAPIでサポートされていない機能を実装し、バグのあるネイティブ機能の複製からバグのない機能を作成しました。 JavaScriptコミュニティの中には、ブラウザ間の不規則性に対処できるjQueryのメリットは非常に誇張されており、実際にはquerySelectors( )メソッドの実装があるためにjQueryは人気を得ているのだと主張する声もあります。   現在のブラウザのエコシステムは10年前ほど複雑ではありません。一部のブラウザにおいてはHTML5のいくつかのAPIに非対応であることもありますが、以前ほど問題となることはありません。Chromeで何も問題がなければ、FirefoxやEdgeにおいても上手くいくでしょう。 jQueryは生産性と効率性を向上することができる、きちんと整理されてドキュメント化された、数多くのプラグインを提供しています。   以下に、無料の素晴らしいjQueryプラグインのリストを挙げています。ぜひ使ってみてください。   1. Freewall FreewallはクロスブラウザなjQueryの豪華なプラグインであり、CSS3のアニメーション効果を伴うグリッドレイアウトを構築することができます。 フレキシブルレイアウト、画像を使ったレイアウト、ネスト構造のグリッドレイアウト、Pinterestのようなレイアウトなど、どのようなレイアウトを構築するとしてもFreewallは、デスクトップとモバイル両方において動的なグリッドレイアウトを構築できるオールインワンのプラグインです。 旧IE8を含むほとんどのブラウザをサポートしていて、汎用性の高いツールです。   2. multiscroll.js multiScroll.jsは、Webサイトに多方向スクロールを追加するのに役立つ優れたプラグインです。2つの垂直方向のレイアウトまたはパネルを備えた、マルチスクローリングなWebサイトの構築を容易にします。 UXを損うことなく、最初のページでユーザーの注目を集めることが図られています。すべてのモダンブラウザで完全に機能し、従来のブラウザでも上手く機能します。 言うまでもなくこのプラグインはモバイルフレンドリーです。   [PR] フロントエンドで副業する学習方法を動画で公開中3. rowGrid.js Googleの画像検索の表示のように、画像をすっきりとディスプレイすることができるプラグインです。親要素に合わせて、他の要素は行方向にまっすぐに並ぶように自動的に最適化されます。 このとき全体的なバランスが取れるように、要素間の余白は調整され、要素のサイズは縮小されます。ただし同じ高さの要素を使わなければ、プラグインは正しく機能しません。   4. Slidebars Slidebarsは、プッシュメニュー（クリックすると開くメニュー）やサイドバーなど、canvas要素以外の要素をWebサイトに追加するのに役立つjQueryプラグインです。 バージョン2は、マークアップを完全に書き直して改良され、canvas要素以外の要素を無制限に使用できるようになりました。   5. pagePiling.js シングルページのWebサイトを構築するときに最適なプラグインの1つです。スクロールのイベント発生時に、インターフェースは複数のページで構成されているように動作し、ユーザーに印象的なエクスペリエンスを提供できるでしょう。 ナビゲーションの方向、スクロールの速度、アニメーションは自由にカスタマイズ可能です。カスタマイズに関してはこのプラグインの可能性は計り知れません。 また完全にレスポンシブデザイン対応であるため、すべての画面上で正しく動作します。IE8を含めてほとんどのブラウザに対応しています。   6. Animsition Animationはページ間の自然な遷移を実現することで、楽しいユーザーエクスペリエンスを提供することが主な目的です。軽量なプラグインであり、ページ遷移に伴うスムーズで美しいCSSアニメーションを作成できます。 標準的なフェード、フェードアップ、フェードダウン、回転、フリップx / y、ズームを含む60以上のさまざまな効果を表現できます。Animationは必須のプラグインです。   7. ZooMove マウスオーバーのイベント発生によって拡大される画像は、私は個人的には好きではありませんが、実装する必要がある場合にはZooMoveを使います。 この洗練されたプラグインはスムーズで使いやすいです（添付したGIF画像だけでは十分に良さをお伝えできません）。   8. Rippleria Rippleriaは、Googleのマテリアルデザインからインスピレーションを受けた、軽量のjQueryプラグインです。 クリック・タップのイベント発生によって波紋の効果が発動することで、ユーザーの視覚的なエクスペリエンスを高めます。 button要素、アイコン、div要素、image要素などのDOM要素に応用することができます。実装とカスタマイズは簡単です。   9. Flickity Flickityほど詳細なドキュメンテーションを備えたjQueryはありません。ドキュメンテーションは正確、詳細、論理的に構造化されているので、Flickityの開発者はドキュメンテーションの最高賞を受けるにふさわしいでしょう。 製品自体も美しく目の保養です。最も優れたカルーセルプラグインの1つです。タッチフレンドリー、レスポンシブデザイン、フリック操作対応のイメージギャラリーを実装できるプラグインです。 個人利用の範囲では無料ですが、商用利用には有料のライセンス契約が必要です。   10. Unslider Unsliderは、Webサイトにスライダを設定するときには最も速く最も簡単なプラグインです。 小型ですが柔軟です。オプション、設定、メソッド、コールバックイベントなどを通して自由に変更できます。   11. Lightcase.js Lightcaseはライトボックスのための素晴らしいプラグインです。まだjQuery 3では動作しませんが、開発者は新しいリリースを計画中です。レスポンシブなCSS3アニメーションのライトボックスを作成するための素晴らしいツールです。 scrollTop、scrollRight、scrollLeft、scrollVertical、scrollHorizontal、scrollBottom、fade、fadeinline、elasticなどのメソッドによって、CSS3のアニメーションを表現できます。 また、div、image、iframe、videoなどのDOM要素、text、Flashをサポートしています。   12. PhotoSwipe PhotoSwipeは、JavaScriptの画像ギャラリーを実装できる私のお気に入りのプラグインです。指で広げる（ズーム）、ピンチ（閉じる）、縦方向にスワイプ（閉じる）、横方向にスワイプ（切り替え）などのタッチジェスチャーをサポートしています。またシングルタップジェスチャーとダブルタップジェスチャーは、カスタマイズ可能です。他の多くの画像ギャラリーのプラグインと異なり、ナビゲーションフレンドリーな構築が可能です。またキーボードコントロールもサポートしています。HTML5による全画面表示モードによって、ユーザーにイマーシブな体験を提供できます。 ページ読み込みが完了するまで、ギャラリーに使われているJavaScriptの読み込みを遅らせるよう設定できるので、プラグインがページの読み込みを遅らせることもありません。 また、「ギャラリーを開くボタン」によって、プラグインのみ読み込みを開始することもできます。PhotoSwipeは、レスポンシブデザインの画像を詳細に保存することにも優れています。 画像は最大サイズで表示され、表示領域が画像よりも小さい場合には拡大できます。これらの機能を合計しても約14 KBの容量であり、開発ツールキットとして必須のプラグインです。   13. Strip Stripは、Webサイトにエレガントなライトボックスを追加することができる柔軟なプラグインです。 滑らかでスマートです。大きな画面においてはページを部分的に覆うだけなので、UIの要素、テキスト、その他のレイアウト部分を表示する余裕が確保されていて、インタラクションの邪魔になることもありません。 小さな画面においては一般的なライトボックスとして機能します。このプラグインは使いやすく、調整するために数多くの設定が用意されています。   14. Turntable.js あなたの製品を紹介することができるショーケースのプラグインは数多くあり、玉石混交です。動的でイマーシブな体験を通してユーザーに製品を紹介したい場合、特に実体のある3次元世界の製品を販売しようという場合には、Turntable.jsが良いでしょう。 最初に私がこのプラグインを試したときには、360°の全角度からこれほど滑らかなビューを作成できることに驚きました。従来のWebスライダーのスイートパッケージ製品、jQueryのスライダーや画像ビューアなどと比較すると、Turntableは革命的なプラグインです。 このプラグインの最大の売りは、ナビゲーションアイコンを使わずに済むことであり、タッチスクリーン上でマウスや指を使って画像を回転・フリップすることができます。インストールは簡単で、クリーンなコードです。   15. Vide.js あなたのWebサイトの背景に動画を追加するための最も簡単な方法は、Vide.jsです。 すべてのモダンブラウザでサポートされているため、プロジェクトで素晴らしい外観をデザインするのに役立つでしょう。 動画のプラグインに通常期待される設定は備わっているので、あなたが必要とする外観を得ることができるでしょう。   16. Trianglify 背景で動画を再生したくはないものの、普通の画像や背景だけでは退屈だと思う場合には、Trianglifyが良い選択です。独自のアルゴリズムにより三角形のパタンを生成します。分散、セルのサイズ、色は指定できます。 急ぎの場合にはTriangle Generatorを使うこともできます。パタンは、canvas要素、svg要素、png形式などにレンダリングできます。またレンダリングの実装をオリジナルに作成することもできます。   17. LazeeMenu Webページのメインメニューをシンプルにしたいのに、メニューツリーが巨大である場合には、追加のサイドバーメニューを使用すれば、使いやすさと完全性のバランスを図ることができます。 LazeeMenuは、順序付けされていないネスト構造のリンクを、複数の階層構造で構成されるナビゲーションメニューに変換します。少しの調整であなたのニーズに合わせたカスタマイズが可能です。   18. Web-ticker 開発したアプリの新しいバージョンを公開したときには、あなたは誇りと達成感を感じるでしょうか？こうしたニュースは世界と共有するべきです。Web-tickerの開発者は、使い始めるときに役立つ手順についてのガイドを提供しています。 Web-tickerには多くの設定が備わっているため、あなたの望む外観のデザインに合わせて微調整することができます。 事例として、ニュース、告知、販売などに利用されています。 また画像を配置することもできますが、ユーザーを動画で悪酔いさせたくなければ、この機能は使わないことを強くおすすめします。   19. Inputmask UXにおいては詳細が重要であるともいえます。無効な日付形式を入力したときに、フォームに再入力を求められる場面を経験したことはありますか？ こうしたことは非常に面倒なので、私はフォームを実装するときには必ずInputmaskを使っています。あらかじめ定義されたフォーマットを保証することでユーザーの入力をサポートできます。 日付、数字、電話番号などに使用できます。Inputmuskは軽量なプラグインですが役に立ちます。使いやすく、柔軟性があり、数多くのオプションがあります。また、動的データマスク、正規表現のマスク、オルタネーターマスクなどをサポートしています。   20. jquery.email-autocomplete.js また電子メールアドレスのドメイン部分を自動入力するための単純なプラグインが必要な場合は、jquery.email-autocomplete.jsが最適です。 あらかじめ定義済みの電子メールのドメインリストに基づいて、対応するドメインをプラグインが提案してくれます。ユーザーは、タブキーまたは右矢印キーを押すか、提案をクリックすれば、ドメインの残りの部分は自動的にプラグインが埋めます。 このプラグインはモバイル環境でも機能します。   21. tinyDatePicker 小さく、速く、拡張性と柔軟性の高い、日付時刻のプラグインとしてはtinyDatePickerがおすすめです。多くの機能が組み込まれていて容量は約5KBです。 カレンダー、アジェンダ、予約システムなどがこのプラグインが非常に役立つ場面です。Bootstrapなどの他のフレームワークと統合することもできます。   22. ReadRemaining.js 「光陰矢の如し」ということわざがあります。20のブラウザのタブが同時に開かれ、スマートフォンに多くの通知が表示され、情報が流れ続ける現代においては、ますます読むための時間が少なくなっています。 ReadRemaining.jsは時間を魔法のように止めることができるわけではありませんが、ユーザーにWeb上の記事を読み始めてからの経過時間を知らせることができます。このプラグインはさり気なく、コンテンツを読む邪魔となることはありません。   23. Tooltipster Tooltipsterのツールチップとは、ユーザーのアクションに反応して表示されるテキストラベルのことです。ツールチップは悪用されない限り、アプリのUXを良い方向に強化してくれます。 Tooltipsterは拡張可能なjQueryプラグインであり、ツールチップで豊富な機能を実現するのに役立ちます。誰にとってもシンプルで万能なプラグインです。   24. TableExport.js 簡単に実装できるjQueryプラグインです。 たった1行のコードだけで、HTMLのtable要素を素早く動的に、Excelのスプレッドシート、コンマで区切られた値、通常のテキスト、テキスト形式のファイル（.txt）などに変換します。とてもシンプルです。   25. Addel Addelは、form要素を念頭に設計された、HTML要素の動的な追加・削除をUIに実装するための軽量なjQueryプラグインです。 このプラグインは直感的で柔軟性があり、動的なフォームを作成するときには時間の節約になります。   26. Chart.js Chart.jsは統計データを表示するのに最適なプラグインです。 データの表示には、8つの図表のデフォルト設定を利用できます。拡張性を備えた図表を表現することができます。データを変更時には、遷移アニメーションを実装できます。 すべてのモダンブラウザにおいてレンダリングのパフォーマンスも優れています。積極的に開発が続けられているプラグラインであり、定期的に新機能が追加されています。もはや退屈な図表となることはありません。   27. jQuery Flip-Quote テキストに躍動感を持たせるには最高のプラグインです。 Flip-Quoteはドキュメント内のテキスト引用符から引用を作成し、スクロール時に画面に表示されると、引用を表示しながら反転します。ドキュメントの引用元もハイライト表示できます。もはや退屈な引用符となることはありません。   28. Sharetastic あなたのWebサイト、アプリ、製品へのトラフィックを増やしたい場合には、ソーシャルメディアにおける存在感を維持することが不可欠です。Sharetasticはシェアボタンを表示するときに役に立ちます。 完全にカスタマイズが可能で、3つのビルトインテーマが組み込まれていて、とても使いやすいプラグインです。   29. HideSeek HideSeekは、あなたが探して求めてきた検索用プラグインかもしれません。検索モジュールとしては最高のインタラクティビティが実現されています。 検索された用語をハイライト表示したり、検索結果間にナビゲーションを表示したり、要素を無視したり、アクセント記号付きの文字を無視したり、見出しのあるリストをサポートすることもできます。   30. Timedropper Timedropperは楽しい外観のプラグインです。カスタマイズに優れていて、4つのスタイルオプション：プライマリー色・テキスト色・背景色・ボーダー色と、6つの機能（自動スイッチ・時刻表示形式・フォーマット・アニメーション・マウスホイール・現在時刻の自動取得）があります。 Timedropperと似たもっと多機能のプラグインも他にいくつかありますが、Timedropperは滑らかで直感的で動作を正確に実現できます。 また、Timedropperの開発者による他のプラグインとしてはDatedropperがあり、8つのスタイルオプションと8つの機能オプションを備えているため、あなたが必要とする外観を正確に構築できます。   おわりに TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。 現役エンジニアがパーソナルメンターとして受講生に1人ずつ付き、マンツーマンのメンタリングで学習をサポートし、フロントエンドの技術をマスターすることが可能です。
JavaScript

Pythonコードのデバッグに便利なAtomのプラグインについて現役エンジニアが解説【初心者向け】

Pythonコードのデバッグに便利なAtomのプラグインについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonコードのデバッグに便利なAtomのプラグインについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Atomとは デバッグに便利なAtomのプラグイン 実際に使ってみよう まとめ   Atomとは Atomとは、Githubが開発したオープンソースのテキストエディタです。 2014年に招待制のβ版としてMac向けにリリースされました。その後MITライセンスでソースコードが公開され、2015年にバージョン1.0がリリースされました。 主にHTML、CSSといったフロントエンドエンジニアを中心に人気の高いエディタです。エディタ本体はElectronを使ったデスクトップアプリとなっており、インターフェースはJavaScriptやCSSを使ってカスタマイズをすることができます。 そのため、現在では自分好みの見た目にできるように様々なテーマがパッケージとしてが公開されています。さらにコードを書くときに便利な拡張機能もインストールすることもできるので、自分で使いやすいエディタにさせることもできます。   [PR] フロントエンドで副業する学習方法を動画で公開中デバッグに便利なAtomのプラグイン Atomはフロントエンド開発で人気のエディタですが、Pythonで開発するときにもよく使われます。 ここではAtomでPythonのコードを書くときに便利なプラグインを紹介します。   autocomplete-python Pythonでコード入力を保管する拡張機能です。通常、Atomのデフォルトの補完機能ではコード内で設定した変数の入力補完が行われますが、この拡張機能ではインストールしたライブラリ、モジュール名を保管するだけではなく、メソッドについては括弧の補完もするので、エラーを減らすことができます。Pythonを書くときには入れておきたいプラグインです。   Python-Debugger Atomはテキストエディタであって、統合開発環境(IDE)ではないので、書いたコードをその場で実行するデバッグ機能は最初から入っていません。ただ、AtomはプラグインをインストールすることでIDEのように各言語に合わせたデバッグ機能をつけることができます。もちろんPythonにもデバッガーが用意されており、それがPython-Debuggerです。このデバッガーはSwift-DebuggerをPython向けに変更されたものです。   実際に使ってみよう それでは、実際にプラグインをインストールしてみましょう。プラグインのインストール方法は同じなので今回はPython-Debuggerを例にインストール方法を紹介します。 まずはAtomを起動して「File」→「Settings」から設定画面を起動します。 設定画面の左側にある「Install」タブをクリックしてプラグインのインストール画面を開きます。検索欄にPython-Debuggerと入力してPython-Debuggerを検索します。もし見つからない場合は検索欄の右側の検索オプションをPackagesを選択すると出てきます。 検索を行い、以下のプラグインが表示されたら、右側のInstallをクリックしてプラグインをインストールします。インストールには少し時間がかかります。 インストールが終わり、以下の表示に変わったらインストールは正常に行われています。もしインストールができない場合はAtomのバージョンの問題があるかもしれませんので、最新版にアップデートして再度お試しください。   使い方 最後に簡単な使い方を説明します。デバッガーはデバッグをかけたいコードを選択した状態でAlt+R(Macの方はoption+R)と入力すると起動します。 そしてコード内でデバッグをかけたい行でAlt+Shift+R(Macのかたはoption+Shift+R)と入力すると指定した行をブレイクポイントとしてデバッグを行うことができます。 なお、ブレークポイントは複数設定できます。デバッグをスタートするときは、下のデバッガービューのrunをクリックしてデバッグをスタートします。複数ブレークポイントを設定した場合はnextをクリックすることで次のデバッガーまでのデバッグを実行できます。   まとめ 今回は、Atomのプラグインでデバッグを行う方法を紹介しました。 Atomは自分の好みのデザインを設定することができて、さらにプラグインを充実させることで快適なコードエディタにカスタマイズできます。ただし、あまり多くのエディタを入れすぎると動作が重くなるので、使うプラグインは必要最小限で設定することをおすすめします。   監修してくれたメンター メンター三浦 モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。 TechAcademyジュニアではPythonロボティクスコースを担当しています。好きな言語はPython, Node.js。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Python

デザイナーなら必見！どんな作業にも便利なSketch用プラグイン12選

本稿は、WebDesignerDepotのブログ記事を許可を得て日本語翻訳し掲載した記事になります。 本記事は、ライターでありUXデザイナーでもあるJake Rocheleau氏によって投稿されました。   Sketch44のベータ版終了に伴い、Sketchの最も優れた機能のひとつである豊富なオープンソースのプラグインを見ていきましょう。 Sketchのコミュニティはとても便利で、ワークフローを根本から改善させるすばらしいプラグインをたくさん見つけることができます。この記事では、デザイナーの皆さんが持つべき12のベストSketchプラグインについて説明します。 なお、初心者向けにSketchの使い方も解説しているので、詳しく操作方法を見たい方は参考にしてください。   1. Sketch Measure Sketch Measureは、デザイナーが開発者・プロジェクトマネージャー・および他のチームメンバーの作業を計画し、その要点を説明するのに役立ちます。 しかしこのプラグインは、自分でデザイン・コーディングすべてを行う一匹狼にとっても便利なものです。Measureプラグインを使用すると要素の幅・高さが表示され、ひと目で適切な測定を行うことができます。 ボタン・テキスト・アイコン・アートボードの主要部分など、ページ内のすべての要素を測ることが可能です。 Sketch Measureを使用すると、ページをそのままHTMLとCSSにエクスポートすることもできます。Adobeのツールでも同じことはできますが、Sketch内でこの機能がすべて備わっていることによって仕事がより簡単になります。   2. InVision Craft 以前にInVisionチームは新しいプラグインCraftを発表しました。これはどちらかというとプラグインのパッケージのようなもので、たくさんの機能とショートカットが追加されています。 ひとつの例として、デザイナーがWeb上のパブリックAPIからテキストとデータを直接取り出すことができるようになるDataプラグインというものがあります。これによって、実際のコンテンツと画像をその場で自動的にアプリに取り込むことが可能です。 CraftはInVisionの開発者によって常に新しい機能のプラグインが更新されており、デザイナーにとってとても価値のあるものになっています。 現在Craftには、6つの主要なプラグイン機能があり、そのすべてがデザインワークフローに追加すべきものです。 Freehand：リアルタイムでの共同作業 Prototype：動的で再現度の高いプロトタイピング Sync：InVisionのプロトタイプとSketchのインスタント同期 Data：Webにある実際のデータを、Sketchのモックアップ上で取得する Library：チーム全体で共有できる、クラウド上のデザインアセット Duplicate：軽快なUIクローニング Craftのホームページを見て、一度試してみると戻ってこれなくなるでしょう。   [PR] フロントエンドで副業する学習方法を動画で公開中3. Sketch Toolbox すべてのSketchユーザーはSketch Toolboxについて知っておく必要があります。プラグインのインストールとカスタマイズをとても簡単にする、優秀なプラグインマネージャーです。 Toolboxを使用すると、何百ものSketchプラグインを検索してそこからインストールするものを選ぶことができます。必要なものをクリックするだけで自動的にコンピュータにダウンロードされ、すぐに使用が可能です。 また、Sketch Toolboxはプラグインをスムーズに動作させるために自動的に更新を行います。 このプラグインはまだベータ版でありGitHubで常にアップデートされていますが、制作ワークフローで使用するのには充分です。実際、この素晴らしいプラグインマネージャーなしでは良いSketchのワークフローは完成しないと思います。   4. Export Assets デザイナーにとって最も詳細なタスクのひとつとして、リソースを割り当てて開発者と共有するということがあります。すべての小さなアイコンやグラフィック、背景パターンを(通常は手作業で)エクスポートしなければなりません。 Export Assetsプラグインを使うと、このプロセスが簡単になります。このプラグインは、デザイナーがAndroid・iOSインターフェイスのアセットをエクスポートしなければならないモバイルアプリに向けたものです。@2xと@3x画面サイズのRetinaアセットが含まれています。 Sketch Exporterプラグインもチェックするのもいいでしょう。現在ベータ版であり、元々のバージョンを改良したものです。   5. Content Generator 前述のCraftプラグインはコンテンツの生成に役立ちますが、Timur CarpeevによるこのContent Generatorのようなシンプルなものが必要なときもあります。 このプラグインをインストールすると、以下のような自動生成されたダミー素材を入れることができます。 ユーザーアバター ファーストネームとラストネーム ダミー段落テキスト カスタム文字列(位置情報・価格・CCカード番号など) すべてのコンテンツはUnsplashやUinamesのようなオープンソースのデータベースから取得されているため、商用プロジェクトでも利用することができます。   6. Looper Photoshopは独自のアクションパネルで繰り返しアクションを自動化することができます。Sketchにはこのようなパネルはありませんが、完全無料で使いやすいLooperプラグインがあります。 このプラグインはページ全体を占める繰り返しパターンを作成する場合に便利です。Webデザイナーよりもグラフィックデザイナーにとって便利なプラグインかもしれません。繰り返しの調整や複製のタスクによる時間を短縮してくれます。 Looperのホームページで機能を確認することができます。誰にでも必要であるというプラグインではないかもしれませんが、使いこなせる人にとっては時間の節約になるものだと思います。   7. Sketch Iconfont Webデザイナーはアイコンフォントを愛用しています。UIデザインがやりやすくなるだけでなく、フォントファイルは一般的に画像よりも容量が小さくなるというメリットもあります。 Sketch Iconfontプラグインはアイコンフォントを格納・ソート・取得するための完成された管理パッケージです。 デフォルトでは空の状態なのでプラグインを利用する際にはアイコンフォントをダウンロードする必要がありますが、それによってオンラインで見つけたアイコンフォントを使い作業するためのアクセスを完全に得ることができます。 アイコンフォントフォルダをすぐに充実させたい場合はこのプラグイン用に特別に作られたフォントバンドルパックを使うことができます。そしていつでもサイトを精錬することができるようになります。 私はこのパッケージを必ず持っておくことをおすすめします。アイコンフォントは普及しており、現在のWebサイトに欠かせないものです。   8. Style Inventory Sketchファイルを新規作成するときは最初からスタイルを作り直すか、以前のモックアップからスタイルをコピー＆ペーストする必要があります。 Style Inventoryプラグインを使うとこの余分な作業を回避することができます。数回のクリックで以前のすべてのスタイルが新しいSketchドキュメントにインポートされ、簡単にアクセスできるようになります。 これらのスタイルには色・テキストスタイル・シンボル・特定のレイヤースタイルが含まれます。 このプラグインはめったに更新されませんが、同種のモックアップをマージするために導入をおすすめします。カラースキームの保存とインポートのためにSketch Palettesプラグインを使用するのもいいかもしれません。   9. Pixel Perfecter デジタルデザイナーは誰もが、ピクセル・パーフェクトなモックアップを誇りとしています。この作業は難しいことではありませんが、すべてのデザイン要素が重なりや欠陥なくグリッドと完全に合わさっていなければなりません。 エクスポートの前に確認したい場合はPixel Perfecterを使用しましょう。この小さなプラグインはすべてのファイルアセットをチェックして、従来のX・Y座標からのピクセルのはみ出しがないか確認を行います。 このプラグインは、相殺するピクセルを自動で修正するものではありませんので注意してください。問題の原因となっているレイヤーがハイライトされるので、それを自分で直すことになります。それでも、各レイヤーを手動で確認するような時間を大いに短縮することができます。   10. Dynamic Button オリジナルの動的ボタンプラグインは2015年に廃止されましたが、新しいDynamic ButtonプラグインはSketch3.5+との互換性がさらに向上しました。 作成した任意のテキストレイヤーにパディングとボタンスタイルを自動的に追加します。またパディングは動的なので、テキストサイズに関係なく更新されます。これはモックアップを常に変更しているUIデザイナーにとってとても役立つものです。 このプラグインはボタンが一般的に固定のサイズ・比率に従うモバイルアプリケーションにも使用できます。Dynamic Buttonは最も魅力的なプラグインというわけではありませんが、そのタスクはよく機能しています。   11. Compo ボタンジェネレータといくつかの特別な機能が必要な場合は、Compoプラグインを試してみるといいでしょう。 Compoの製作者は、Dynamic Buttonをしばらく使用してアイデアを得ました。Compoは仕様に合わせて、適切なボタンサイズとテキストサイズを自動生成します。このプラグインを使うとワンクリックで自動的にサイズ調整・配置されたSketchコンポーネントを作成することができます。 通常はボタンを作成してからテキストを変更すると、テキストレイヤーにしか反映されず下のボタンはサイズが小さすぎる状態になります。Compoは、ボタンとテキストを自動的にひとつの要素としてサイズ変更を行います。 GitHubレポジトリには、初めて使用する人のためのいくつかのユーザーズガイドとたくさんのデモがあります。   12. CSSketch 最後にCSSketchプラグインを紹介します。これは作成している全てのスタイルのCSSコードに直接アクセスしたい、デザイナーと開発者の組み合わせにとって便利なものです。 デザインしたページのアセットを含むスタイルシートを丸ごとエクスポートすることができます。ただし、自動化されたものであるためA++品質のコードは期待できません。 私はまだ手作業でCSSをコーディングする方が好きですが、このプラグインは技術を持っていないデザイナーや、時間を節約したい開発者にとっての手助けとなるでしょう。 デザイナーにとって当たり前のツールとなりつつあるSketchですが、機能や使えるプラグインもどんどん増えています。 プラグインは状況によっては非常に作業時間を短縮するツールになり得ます。今は必要なくても必要になった時に知っておくとデザインの作業に役立つでしょう。   また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

WordPressの使い方！初心者でもサイト作成が簡単に｜現役エンジニアが解説

WordPressを使用するとデザインの変更や機能のカスタマイズ、データの管理を手軽に行える多機能なブログサービスを作成することができます。実際、このTechAcademyマガジンもWordPressを使って作られたサイトです。 他にも企業のコーポレートサイトやブログサイトなどの多くはWordPressを使われているのです。サイト作成に便利なプラットフォームなので、ぜひ使えるように理解していきましょう。 そもそもWordPressとは何なのかよく分からない方は、今さら聞けない！WordPressとは【初心者向け】をご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、WordPress講座の内容をもとに紹介しています。   大石ゆかり 田島メンター！！WordPressのことはなんとかわかったんですけど、どうやって使うんですか〜？ 田島悠介 WordPressを使うにはインストールや初期設定が必要なんだ。 大石ゆかり なんだか難しそうですね・・・。 田島悠介 きちんと手順に従えば簡単にできるよ。インストールさえしてしまえば、簡単に記事の作成とかサイトデザインとかもできるから。それじゃあ教えてあげるね。 大石ゆかり よろしくお願いします！！！   目次 WordPressのインストール手順 初期設定とインストール WordPress管理画面の基本設定 記事の投稿方法 カテゴリーとタグの管理 ユーザー管理 パーマリンクの設定 テーマの使い方 プラグインの使い方 WordPressで知っておきたいその他の設定   WordPressのインストール手順 用意するもの PHP・MySQLが使用できるサーバー(レンタルサーバーなど) 以下の条件があります。 PHP バージョン 7.4 以上 MySQL バージョン 5.6 以上 または MariaDB バージョン 10.1 以上 HTTPS対応 (2020年6月時点) FTPクライアント(今回はFileZillaを使用します) 独自ドメイン(yahoo.co.jpのように自分のサイトを公開する場合に必要です) 独自ドメイン、レンタルサーバーについては別途記事内で比較しています。合わせてご覧ください。   本体の入手とサーバーへのアップロード まずはWordPressの公式サイトのダウンロードページにアクセスしましょう。 WordPress – ダウンロード 以下のボタンをクリックしてWordPress本体をダウンロードします。 ダウンロードし、解凍した「wordpress」という名前のフォルダを任意の半角英数字の名前に変更します。ここではwpとしています。(変更せず、「wordpress」のままでもOKです) FTPクライアントを使用してサーバーに本体をアップロードします。今回はFileZillaを使用します。サーバーに接続し、WordPressを設置したい場所にフォルダごとアップロードします。 アップロードしたフォルダのある場所にアクセスします。※ ※例えばhttp://xxxx.ne.jp/に「wp」と名前変更したWordPressフォルダをアップロードした場合、アクセスする場所はhttp://xxxx.ne.jp/wpとなります。また、これがそのサイトのアドレスになります。   [PR] フロントエンドで副業する学習方法を動画で公開中初期設定とインストール データベースの設定を行います。「さあ、始めましょう！」のボタンをクリックします。 データベース名・ユーザー名・パスワード・データベースのホスト名を入力し、「送信」ボタンをクリックします。これらは使用しているレンタルサーバーにより設定が異なります。 以下は、レンタルサーバーのスターサーバーでの例です。(管理画面の「データベース設定」から見ることができます) パスワードはこのデータベースで設定したものを入力します。 また、データベースの文字コードは「UTF-8」にしておきます。 「インストールを実行」をクリックします。 ここではWordPressサイトの基本的な設定を行います。 また、これらの項目は全て後でいつでも変更できます。「検索エンジンがサイトをインデックスしないようにする」にチェックを入れるとサイトが検索エンジンに表示されない状態にしておくことができます。 テスト導入時などにチェックします。入力後「WordPressをインストール」をクリックします。 インストール完了のメッセージと、ログイン用のユーザー名とパスワードに関する情報が表示されます。 続いてログイン画面が表示されます。設定したユーザー名とパスワードを入力し「ログイン」をクリックします。   管理画面の基本設定 ログインするとWordPressの管理画面が表示されます。記事の投稿やサイトデザインの変更、プラグインの追加や各種設定はこの画面から行います。   サイトの基本情報変更 左メニューの「外観」から「カスタマイズ」を選択します。 「サイト基本情報」を選択します。 サイトのタイトルとキャッチフレーズはここからいつでも変更できます。   ログイン・ログアウト方法 管理画面からログアウトする場合は上メニューのユーザー名から「ログアウト」を選択します。 再び管理画面にログインするときはサイト上の「ログイン」(テーマにより表示されないものもあります)か、WordPressフォルダ内にあるwp-login.phpにアクセスすることでログイン画面に移行することができます。※ ※例えばhttp://xxxx.ne.jp/wpというサイトの場合はhttp://xxxx.ne.jp/wp/wp-login.phpがログイン画面へのアクセスになります。   記事の投稿 左メニューの「投稿」から「新規追加」を選択します。 「タイトルを追加」の部分にタイトル、「文章を入力、または…」の欄に本文を入力します。 なお、WordPressではバージョン5.0からエディタが「ブロックエディター」に変更になっています。 この記事でもブロックエディターの説明を行っています。 また、/ を入力するか、+ボタンを押すことで画像などのコンテンツを挿入することができます。 入力が完了したら「公開」ボタンをクリックすると記事がサイトに反映されます。     予約投稿の方法 「公開」ボタンを押せば、その瞬間記事として公開されますが、中には決まった時間に公開したいと思う人も多くいるでしょう。 公開ボタンを押した画面の下に表示されている「公開：今すぐ」をクリックします。 カレンダーが表示され、日時を自由に決めることができます。 トップページには出したくないから過去の記事として公開したい、明日の9時に公開したいので、予約投稿にする際に便利です。 今より先の時間に設定すると、「公開」から「予約投稿」というボタン名に変わります。 設定した時間になったら自動的に公開されるので、時間に合わせて手動で公開する必要がなく便利な機能でしょう。   カテゴリとタグの管理 WordPressでは投稿した記事を分類するために、カテゴリーやタグを利用することが出来ます。一般的に、カテゴリーは、記事を大まかにグループ分けする場合に使われ、タグはさらに細かく分ける場合に用いられています。 WordPressで投稿する記事は、必ずカテゴリーを選択しなければなりませんが、タグは必ずしも設定しなくてもよいことになっています。 新規カテゴリーの作成方法 ログインした後、「投稿」から「カテゴリー」を選択すると、カテゴリー新規追加、既存のカテゴリー編集の画面が開きます。 名前にカテゴリー名を書いて、下のほうにある新規カテゴリーを追加ボタンを押すと、新規カテゴリーが追加されます。 スラッグというのは、カテゴリーのアドレスにつける別名みたいなものです。スラッグを設定しない状態で、未分類のカテゴリー一覧の記事を表示した場合、アドレスが以下のようになります。 http://あなたのHPのURL/category/%E6%9C%AA%E5%88%86%E9%A1%9E/ ブラウザのURLを見てみると、 http://あなたのHPのURL/category/未分類/ と表示されていますがそれはブラウザが気を利かせて、日本語に変換してくれただけで、本当はURLエンコードされた日本語文字列になっています。コピーしてテキストエディタや掲示板などの入力欄に貼り付けるとわかります。 未分類のカテゴリーに対して、not-categoryなどのスラッグをつけると「http://あなたのHPのURL/category/not-category/」でアクセスできるようになります。 また、カテゴリーに親カテゴリーを指定することで、カテゴリーに階層構造を持たせることも出来ます。   新規タグの作成方法 ログインした後、「投稿」から「タグ」を選択すると、タグの新規追加、既存のカテゴリー編集の画面が開きます。 タグもカテゴリーと同じで、スラッグを利用することが出来ます。タグは、記事投稿時に複数設定することが出来るので、該当するものを設定しましょう。   ユーザー管理 WordPressでは、複数人で管理することも出来て、それぞれ権限を設定することでセキュリティを向上させることが出来ます。 管理画面のユーザーをクリックすると、新規登録・編集画面になります。 権限グループごとに何ができるのか 新規追加の前に、権限について見ていきます。権限には以下の5種類のグループがあります。 購読者 WordPressにログインすることが可能。プロフィールの変更が出来る 寄稿者 記事を投稿できる。ただし、編集者や管理者が許可しない限り公開状態には出来ません 投稿者 記事を投稿できるが、他のユーザーが作成した記事は扱えないことと、固定ページ作成は出来ない 編集者 他のユーザーが作成した記事や固定ページなども扱えるが、デザインやプラグインなどWordPressの設定に関わるものは扱えない 管理者  全ての権限がある となっています。寄稿者は記事を投稿できるものの、公開状態にするには編集者以上の権限を持つユーザーの許可が必要。 投稿者は、記事を投稿できるものの、カテゴリーなどの作成や管理権限が必要なもの、他のユーザーが作成した記事の編集は行えません。 編集者は、ほとんど全ての作業が可能ですが、設定にかかわるものは変更できないです。管理ユーザーに権限を設定することで、複数人の管理人がいてもセキュリティが守られるようになっています。   新規ユーザーの登録方法 管理画面の「ユーザー」をクリックすると、登録されているユーザー一覧が表示されます。ページトップに「新規追加」ボタンがあるので、こちらをクリックしましょう。   必要な情報を設定した後、権限を決めて追加ボタンを押すと追加できます。 権限を間違えると、全ての記事が削除されてしまう恐れもあるので注意が必要です。   ユーザーの削除方法 管理者の権限を持つユーザーでログインすると、削除することが出来ます。   パーマリンクの設定 パーマリンクでは、記事ページなどのURLをカスタマイズすることができます。「設定」から「パーマリンク設定」でパーマリンクの編集を行うことができるので、確認してみましょう。 URLとは、通常であれば、ファイルの場所を示しています。例えば、URLが http://ほにゃらら.com/aisatsu/ohayou.html だった場合「aisatsu」というフォルダの中の「ohayou.html」というファイルの情報が返されます。 ところがWebサーバーの設定でこれを変更することが出来ます。WordPressのインストール先のフォルダに.htaccessファイルがあります。 中身について詳細は解説しませんが、要求したファイルやフォルダがない場合、全てのアクセスを「index.php」というファイルに集める、という設定になっています。index.phpにアクセスを集めて、ブラウザのアドレスから判断して、プログラムでデータベースから検索して結果を表示しています。 WordPressのデフォルトの設定では、2020年6月24日に投稿した場合のURLは、 http://あなたのURL/2020/06/24/hello-world/ などのようになっています。この/2020/06/24/hello-world/の部分が、パーマリンクになります。デフォルトでは、日付と投稿名でデータベースから記事を取得しているようです。 この部分をある程度自由に変更することが出来ます。   パーマリンクの変更 パーマリンクを変更した場合、どのようにURLが変わるのかを見てみます。パーマリンクの設定の変更画面は、管理画面から設定、パーマリンク設定をクリックします。 デフォルトの状態は、日付と投稿名です。2020年の6月に投稿した記事であれば、 /2020/06/投稿した記事のタイトル/ というURLになります。 基本に設定すると「/?p=123」という、記事に設定されている番号が付けられます。これはデータベース上で管理されている、その記事唯一の番号です。 月と投稿名だと「/2020/06/投稿した記事のタイトル/」になります。数字ベースだと「/archives/123」といった形になります。 投稿した記事のタイトルだけという設定もあり「/投稿した記事のタイトル/」というURLにすることも可能です。   パーマリンクのカスタム構造 パーマリンク設定では、自分でカスタマイズすることもできます。構造タグというものを使用します。詳しくは使い方を参照してください。 カテゴリーベースを変更することも出来ます。カテゴリーベースのところを.(ドット)にすると「/category/カテゴリー名/」になるURLが「/カテゴリー名/」に短縮することも出来ます。 ただし、その場合投稿記事のパーマリンクが「/記事のタイトル/」になっていた場合、重なる可能性があります。記事の投稿名がhello-worldで、カテゴリーにhello-worldがあった場合どうなるでしょうか？ どちらも http://あなたのURL/hello-world/ でアクセスできてしまいます。この場合、投稿した記事が優先して表示されてしまい、カテゴリー一覧が表示されなくなるので注意が必要です。   テーマ WordPressは「テーマ」という機能によりサイトのデザインを簡単に変更することができます。各種テーマは公式が作成したものやユーザーが公開しているものが使用できます。 個人や企業でWordPressのテーマを作っているところも多いので、費用をかけなくても十分整ったサイトを作ることができるはずです。   テーマの変更方法 左メニューの「外観」から「テーマ」を選択します。   インストール済みのテーマの一覧が表示されます。上の「新規追加」かテーマ一覧内の「新しいテーマを追加」をクリックします。   テーマは新着や人気順から探せる他、右上の「テーマを検索」からキーワードを指定して見つけることができます。   テーマをインストールし、一覧画面から「有効化」をクリックするとサイトに反映されます。   テーマの例 「WP Portfolio」テーマは、ポートフォリオ作成に適したテーマです。記事作成時にアイキャッチに指定した写真やイラストなどを一覧できるため作品を見せやすくなっています。   おすすめのテーマ 各シチュエーションで使えるWordPressのテーマを紹介します。 国内ではブログサイトやコーポレートサイトをWordPressで利用している企業が多いですが、海外ではECサイトなどもテンプレートが用意されているので、ぜひ使ってみてください。 以下では、ブログサイト、ECサイト、コーポレートサイトに分けてそれぞれ人気のテーマを紹介しています。 ブログサイト アルバトロス かなり多くのブロガーが利用しているオープンケージのWordPressのテーマ。その中でも王道のアルバトロスをおすすめしたいと思います。 有料ではありますが、技術的なスキルが全くない人でも簡単におしゃれなWebサイトを作れるのが大きな特徴です。 カスタマイズもかなり自由に行えますし、一度買ってしまえばずっとサイトを運営できるので、多くのブロガーから人気なのでしょう。 アルバトロス   賢威 SEOに強いブログ・サイトを作りたい方におすすめのテーマです。ウェブライダーという様々な企業のSEOコンサルを担ってきた会社が開発を行っています。 サイトのテーマだけでなく、SEOに関するマニュアルも載せているので、集客にも力を入れたい人にとっては一石二鳥なテーマになるはずです。 賢威   Riba Lite 画像のサムネイルが大きくバックに表示されているタイプのサイトです。カメラでよく写真を撮ったり、トップページで写真を強調させたいときにおすすめのテーマです。 ダウンロード / DEMO   Hueman よく見るニュースサイトのような作りになっているテンプレートです。サイドメニューも充実しており、どこに何を置くか難しい技術を使わなくても選択するだけで設定することができます。 個人のブログサイトとしても活用できるので、ぜひ活用してみてください。 ダウンロード / DEMO   ECサイト Shop Isle wordPressでECサイトを構築する際は、WooCommerceプラグインを使うのが定番です。WooCommereに特化したテーマの1つがShop Isleです。 様々な効果を適用でき、ECサイトだけでなくビジネスサイトとしても活用できます。より高機能のPRO版も存在します。 ダウンロード / DEMO   YITH Proteo ファッションやアパレル系のECサイトにおすすめです。 カテゴリも細かく設定できますし、洋服などを販売する際に写真にマウスオーバーすると他の写真も出てくるといった仕掛けもあります。 スマホで見るとカートに入っているアイテム数、購入金額がトップで確認できるのでユーザーとしても使いやすいでしょう。 ダウンロード / DEMO   Fukasawa 白を基調としたデザインでより一層アイテムを引き立てるテンプレートでしょう。商品自体も白をバックに写真を撮っているので、シックな印象を与えますね。 ブランディングとしての見せ方としても使えるのでおすすめです！ ダウンロード / DEMO   コーポレートサイト Zelle PRO WordPressのテンプレートの中でも非常に多機能で、出来ないことは無いんじゃないかというくらい多くのことを実現できるはずです。 また、デザイン面でもスクロールすると横からフォームが出てくるパララックス仕様になっており、おしゃれにも見えるでしょう。 ダウンロード / DEMO   Sydney 画像がディスプレイいっぱいに表示されたインパクトの大きいテンプレートです。 トップページに会社情報、事業内容、メンバー、SNSアカウント、ニュースなど多くの情報も載せられるのでスクロールしていて飽きが来ないでしょう。 ダウンロード / DEMO   他にも初心者におすすめの無料で使えるWordPressのテーマを紹介しているので、合わせてご覧ください。   プラグイン WordPressではプラグインという拡張機能を使うことによってサイトにさまざまなシステムを追加することができます。 アクセス解析を行うものや問い合わせフォームを追加するもの、スライドショーを表示させるものなどさまざまなプラグインがあります。   プラグインの検索とインストール 左メニューの「プラグイン」から「新規追加」を選択します。   テーマのときと同様に、新着順や人気順・キーワードでの検索でプラグインを探すことができます。「今すぐインストール」ボタンをクリックするとプラグインがWordPressにインストールされます。 インストールされたらすぐに利用できるわけではなく、まず有効化をしなければなりません。   プラグインの有効化 左メニューの「プラグイン」から「インストール済みプラグイン」を選択します。   インストールされているプラグインの一覧が表示されます。使用したいプラグインの「有効化」をクリックします。   プラグインの例 SNSボタンのプラグイン 「Social Media Feather | social media sharing」プラグインを使用すると、サイトの記事にFacebookやTwitterなどの共有用アイコンを追加することができます。 利用するサービスやアイコンの大きさなども自由にカスタマイズが可能です。記事をシェアしてもらうためにもSNSボタンはぜひとも設置しておきましょう。   記事編集で役立つプラグイン TinyMCE Advanced 記事作成をする前に必ず入れておきたいプラグインです。ビジュアルエディタに追加できる各機能を手軽に設定できます。 TinyMCE Advancedの使い方   WP Videos YouTubeやVimeoといった外部の動画を記事内に埋め込むことができるプラグインです。URLを入力するだけで追加できるので、簡単に設定できるはずです。 WP Videos   SEO対策に役立つプラグイン All in One SEO Pack SEO対策全般の設定をまとめて行えるプラグインです。 FacebookやTwitterといったSNSとの連携、SEOにおいて欠かせないタイトルタグ・ディスクリプションタグの設定も行えるので、まず最初に入れておきましょう。 All in One SEO Packの使い方   Google XML Sitemaps XMLサイトマップを作成してGoogleに更新を通知させることができます。サイトマップがあることでサイトにどんなページが存在するのかGoogleに認識させることができるので、SEOの効果も見込めます。 Google
WordPress

WordPressのプラグインをインストールする方法【WordPress初心者向け】

WordPress初心者向けに、プラグインのインストール方法を紹介する記事です。 前回のテーマのインストール方法と同じく、基本的な操作ですので、しっかりと覚えておきましょう。   WordPressでは、プラグインを追加することによってサイトのカスタマイズを簡単に行うことができます。 プラグインの変更はダッシュボードからアクセスして変更する方法と、配布サイトから入手したプラグインをファイルとしてアップロードして適用する方法があります。 今回はそれぞれ分けて紹介します。 目次AtomとはJavaScript開発のための設定JavaScript開発のためのプラグインの導入まとめ筆者プロフィール   大石ゆかり 田島メンター！！WordPressのプラグインってどうやってインストールするんですか？ 田島悠介 「ダッシュボードからインストールする方法」と「ファイルとしてアップロードする方法」の2種類あるんだ。どっちも簡単だから、すぐに覚えられると思うよ！ 大石ゆかり 教えてください！   ダッシュボードからのインストール まずは簡単なダッシュボードからインストールする方法を説明します。 WordPressにログインして、「プラグイン」→「新規追加」を選択します。   プラグインを追加する画面が表示されます。   今回は「Easy FancyBox」というプラグインをインストールしてみます。 Easy FancyBoxは、サイト内の画像をポップアップ表示するプラグインです。 検索欄にEasy FancyBoxと入力して「プラグインの検索」をクリックします。   「今すぐインストール」をクリックして「有効化」します。   一覧で、Easy FancyBoxプラグインが追加されたことが確認できます。 きちんとプラグインが動作するか、チェックしてみます。 このプラグインは、画像をクリックするとLightBoxとして拡大表示します。 そのためには画像から、「メディアファイル」へ下記のようにリンクを貼っておく必要があります。   画像をポップアップで表示するプラグインですので、記事内の写真をクリックします。 このように表示されましたので、プラグインが無事に動作したことがわかりました。     ファイルをアップロードしてインストール 次に、WordPress公式の配布サイト、あるいは個人配布サイトからWordPressプラグインファイルをダウンロードし、ファイルとしてサーバにアップロードする方法を紹介します。   今回はAddToAny Share Buttonsというプラグインを利用してみます。 AddToAny Share Buttonsは、記事内にソーシャルメディアの共有ボタンを設置するプラグインです。 まずは、WordPressの公式ダウンロードサイト内の「ダウンロード」ボタンをクリックします。   ZIPファイルをデスクトップやダウンロードフォルダなどに保存します。 ダッシュボードの「プラグイン」から「新規追加」をクリックします。   左上部の「プラグインのアップロード」をクリックします。 「ファイルを選択」をクリックして、先ほどダウンロードしたZIPファイルを選択し、「今すぐインストール」をクリックします。   インストールが完了したら、「プラグインを有効化」をクリックします。   プラグインの一覧が表示され、AddToAny Share Buttonsプラグインも確認できます。   プラグインが動作しているか確認します。 記事内にソーシャルメディアの共有ボタンが設置されているかチェックするために、記事のタイトルをクリックしましょう。   記事ごとにFacebookとTwitterとメールのボタンが追加されました。 ちなみに、設置するソーシャルメディアの種類は「設定」→「AddToAny」で追加や削除が可能です。     無事にインストールできましたか？ 初心者におすすめのWordPressのプラグインを紹介する記事もあるので、参考にして使ってみてください！   大石ゆかり プラグインをインストールできました〜。ほんとに手軽にできますね♪ 田島悠介 そうだね。プラグインを使うとより多機能なサイトを手軽に作れるから、ドンドン使ってみると良いよ♪ 大石ゆかり はい♪   [PR] フロントエンドで副業する学習方法を動画で公開中WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。
WordPress

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Atomエディタで快適にJavaScriptの開発を行うための設定を現役エンジニアが解説【初心者向け】