HOWTOカテゴリー記事一覧

macOSをアップデートしたらgitコマンドでエラー「xcrun: error: invalid active developer path」が発生した時の対応方法

git コマンドで突如エラー

macOSをMontereyにアップデートしたらこんなエラー( xcrun: error: invalid active developer path )が出てなぜか動かない。

% git status
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

1 2	% git status xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

macにコマンドライン開発者ツールをインストールして解決

どうやらコマンドライン開発者ツールを入れてあげればいいようなので、ターミナルから以下のコマンドを実行。

% xcode-select --install

1	% xcode-select --install

ウィンドウが立ち上がるのでYesマンになってインストール。

以下のような画面が出てきたらOK

この後 git コマンドを実行してみる。

% git status            
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   wp-content/themes/ ・・・・

% git status

On branch master

Changes not staged for commit:

(use "git add <file>..." to update what will be committed)

(use "git restore <file>..." to discard changes in working directory)

modified: wp-content/themes/ ・・・・

ちゃんと表示された！

一件落着。

DreamweaverでSass（Compass）を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト（通称：黒い画面）はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築（テーマ開発）することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています（この部分を適宜ご自身の環境に合わせて以降読み替えてください）。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます（css/minにはminifyされたCSSが配置されます）

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません（笑）

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

on_stylesheet_saved do
    `compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`
end

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :expanded # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

on_stylesheet_saved do

`compass compile -c wp-content/themes/THEME_NAME/config_prod.rb --force`

end

config_prod.rb

Minify（圧縮）用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

:expanded ・・・通常のCSS出力
:nested ・・・ネストされたCSS出力
:compact ・・・コンパクトなCSS出力
:compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

Encoding.default_external = "UTF-8"

http_path = "/"
css_dir = "/wp-content/themes/THEME_NAME/css/min/"
sass_dir = "/wp-content/themes/THEME_NAME/scss/"
images_dir = "/wp-content/themes/THEME_NAME/images/"
javascripts_dir = "/wp-content/themes/THEME_NAME/js/"
fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed
sourcemap = true
line_comments = false
relative_assets = true

Encoding.default_external = "UTF-8"

http_path = "/"

css_dir = "/wp-content/themes/THEME_NAME/css/min/"

sass_dir = "/wp-content/themes/THEME_NAME/scss/"

images_dir = "/wp-content/themes/THEME_NAME/images/"

javascripts_dir = "/wp-content/themes/THEME_NAME/js/"

fonts_dir = "/wp-content/themes/THEME_NAME/fonts/"

output_style = :compressed # :expanded or :nested or :compact or :compressed

sourcemap = true

line_comments = false

relative_assets = true

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

CSSプリプロセッサー－一般設定

以下のように設定しておきました。

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました： /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー！出来た！

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。

[WordPress] Gutenbergで作るランディングページ！Gutenbergの使い方やテーマ対応方法！

WordPressの次期エディタ「Gutenberg」について学ぼう

あけましておめでとうございます。今年もよろしくお願いします！

新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg（グーテンベルク）」のお話をさせていただきました。

このポストは、WordBench京都&大阪の振り返りポストです。

WordBench京都&大阪 1月 WordPressとWebマーケティングことはじめ

https://wb-kyoto.connpass.com/event/70848/

大阪のたこ焼き美味しかったです！

セッションスライド

当日利用したスライドです。

※ デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。

Gutenbergってなんだ？

Gutenberg（グーテンベルク）とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。

現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。

Gutenbergでは、ブロックと言う単位でコンテンツを構成します。

ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。

Gutenbergを試してみたい！

Gutenbergは現在プラグイン形式で開発中です。

Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。

※ 鋭意開発中なので本番環境などで使わない方がいいです。

Gutenberg Plugin

Gutenberg

Gutenbergを無効化したい！

Gutenbergの導入は怖い！Gutenbergを利用したくない！無効化したい！

という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。

※ 現在鋭意開発中なので本番環境などで使わない方がいいです。

Classic Editor Plugin

Classic Editor

Gutenbergの使い方を知りたい

Gutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。

そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。

画面キャプチャを交えて簡単に使い方を紹介します。

編集画面

編集画面上部

上部左側には、ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。

上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え（グーテンベルクとクラシックエディタを切り替えるボタン）が配置されています。

右サイドバー

右サイドバーには、DocumentタブとBlockタブがあります。

Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。

Blockタブでは、選択中のブロック固有のスタイルやCSS ID・クラスの設定等ができます。

コンテンツエリア

見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。

左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン（プラスボタン）を押してブロックを追加していきます。

どんなブロックが存在するの？

デフォルトでは、以下のブロックが定義されています。

多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。

カラムレイアウト（3列や4列）には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい！

数多くの埋め込みにも対応しています。

ブロックのデータはどうやって保存されるの？

各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。

表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。

これから改善されていくところやメモなど

パーマリンクの設定箇所がない

投稿一覧クイック編集から編集するしかなさそう。

この件について、Githubで議論されている。

https://github.com/WordPress/gutenberg/pull/3418

カラムを柔軟に作れない

今のところ柔軟なカラム設定出来ない。

https://github.com/WordPress/gutenberg/issues/219

カスタム投稿タイプで動作させるためには

register_post_typeする際に、‘show_in_rest’ => true が必要。

編集画面が真っ白になることがある

ローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。

管理画面の設定→パーマリンク設定

画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。

テーマをGutenbergに対応させるには

以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。

functions.php の編集

add_theme_supportに’gutenberg’を指定します。

wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。

colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。

<?php
/**
 * Theme Support
 */
function lp_setup_theme() {
    
    // Gutenberg support
    add_theme_support( 'gutenberg', array(
        'wide-images' => true,
        'colors' => array(
            '#21759b', /* WordPress Blue */
            '#d54e21', /* WordPress Orange */
            '#464646', /* WordPress Grey */
            '#ffffff'  /* White */
        )
    ) );
    
}
add_action( 'after_setup_theme', 'lp_setup_theme' );

<?php

/**

* Theme Support

function lp_setup_theme() {

// Gutenberg support

add_theme_support( 'gutenberg', array(

'wide-images' => true,

'colors' => array(

'#21759b', /* WordPress Blue */

'#d54e21', /* WordPress Orange */

'#464646', /* WordPress Grey */

'#ffffff' /* White */

)

) );

}

add_action( 'after_setup_theme', 'lp_setup_theme' );

style.css の編集

add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。

そのクラスに対してテーマとしての振る舞いを定義します。

/**
 * ワイド幅、全幅のスタイル定義
 */

.alignwide {
    width: calc(100% + 200px);
    margin: 0 0 1rem -100px;
}

.alignfull {
    width: calc(100% + 100vw);
    margin: 0 0 1rem -50vw;
}

.alignfull img {
    display: block;
    margin: 0 auto;
    max-width: 100vw;
    height: auto;
}

/**

* ワイド幅、全幅のスタイル定義

.alignwide {

width: calc(100% + 200px);

margin: 0 0 1rem -100px;

}

.alignfull {

width: calc(100% + 100vw);

margin: 0 0 1rem -50vw;

}

.alignfull img {

display: block;

margin: 0 auto;

max-width: 100vw;

height: auto;

}

Gutenbergについて理解を深めたい！

Gutenbergについて理解を深めるには、実際に使ってみるのが一番！

Gutenberg Challenge

ということで、WordBench京都&大阪では、「Gutenberg Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。

これからGutenbergを触って見ようかな！と思っている方、以下のリポジトリからGutenberg Challengeに挑戦してみてください！

https://github.com/onocom/gutenberg-challenge

【Windows】右クリックメニュー［送る］の活用方法、追加・設定方法（SendToディレクトリの場所一覧）

意外と使ってない！？右クリックメニューの［送る］とは。その活用方法。

Windowsユーザーの皆様、デスクトップ画面やエクスプローラー画面でファイルやフォルダを右クリックした時に表示される［送る(N)］というメニューをご存知ですか？

こんなやつ↓

このメニューを駆使することで、ZIPファイルをサクッと作ったり、画像をリサイズしたり、HTMLファイルを直接テキストエディタで編集したり出来るので私は大変重宝しています。

意外と利用されていない方も多そうなのと、毎回、新しいパソコンの初期設定する際に［送る］メニューの設定場所（SendToフォルダの場所）を探してしまうので、とりあえず記事にしてみました。

お役に立てば幸いです。

［送る］の活用方法

右クリックメニューの［送る］には以下のような設定をして業務の効率化を図っています。

偉そうに書いてますが一般的な使い方しか出来ていないので、他にもこうやって活用できるんだぜ！などあればぜひコメントで教えて下さい！

写真や画像の保存サイズをサクッと小さくする

画像の大きさやサイズを縮小するソフト「縮小専用」(通称：縮専)を愛用しています。

しかし、一つの写真を小さくしたいがために毎回、縮専を立ち上げるのも面倒です。

その面倒を回避するために、右クリックメニュー［送る］に縮小専用を登録して、写真・画像をサクッとリサイズしています。

縮小専用（縮専）でサクッとリサイズ — 右クリック→送る→ShukuSenでサクッとリサイズ出来る。

普段はブラウザで表示させたいけど、たまにテキストエディタで開きたいファイルを開く

index.html等のHTMLファイルは基本的にブラウザで表示させたいのですが、ソースコード編集するときなどはテキストエディタで開きたい場合があります。

そういった時に、テキストエディタを立ち上げてからドラッグ&ドロップで編集対象のファイルを開くのは面倒です。

右クリックメニュー［送る］にテキストエディタを登録することでサクッと編集画面を立ち上げられます。

すぐ出来る［送る］メニューの設定方法

どうやって［送る(N)］メニューに登録するのかをご紹介します。非常に簡単です。

SendToというディレクトリに表示させたいアプリケーションのショートカットを配置してあげるだけです。

具体的な設定方法は以下のとおりです。

［送る］メニューの設定場所（SendToディレクトリのパス）を調べる

キーボードで、Windowsキー＋Ｒを押して［ファイル名を指定して実行］を立ち上げます。

名前の部分に以下を入力します。

shell:sendto

1	shell:sendto

OKをクリックするとSendToフォルダが表示されます。

上記でフォルダが表示されない場合は、記事末のSendToディレクトリのパス一覧表を御覧ください。

ショートカットを配置する

SendToディレクトリに、必要なアプリケーションのショートカットを配置します。

これで、［送る(N)］メニューに該当のアプリケーションが表示されるようになりました。

Windowsバージョン別 SendToディレクトリのパス一覧表

ユーザー名には自分のユーザ名を当てはめてください。

例：ユーザー名 takashi でWindows 10の場合のSendToのパス
C:\Users\takashi\AppData\Roaming\Microsoft\Windows\SendTo\

※ 古いOSのSendToディレクトリのパスは様々なウェブサイトを参照して以下の表を作成しました。誤りがあればコメントでご報告ください。

Windows 10のSendToの場所

C:\Users\［ユーザー名］\AppData\Roaming\Microsoft\Windows\SendTo\

Windows 8 (Windows 8.1)のSendToの場所

C:\Users\［ユーザー名］\AppData\Roaming\Microsoft\Windows\SendTo\

Windows 7のSendToの場所

C:\Users\［ユーザー名］\AppData\Roaming\Microsoft\Windows\SendTo\

Windows VistaのSendToの場所

C:\Users\［ユーザー名］\AppData\Roaming\Microsoft\Windows\SendTo\

Windows 2000のSendToの場所

C:\Documents and Settings\［ユーザー名］\SendTo\

Windows XPのSendToの場所

C:\Documents and Settings\［ユーザー名］\SendTo\

Windows NT4.0のSendToの場所

C:\WINNT\Profiles\［ユーザー名］\SendTo\

Windows MeのSendToの場所

C:\WINDOWS\SendTo\

Windows 98のSendToの場所

C:\Windows\SendTo\

Windows 95のSendToの場所

C:\Windows\SendTo\

まとめ

いかがでしたでしょうか？送るメニュー役に立ちそうですか？

作業効率化に貢献できると嬉しいです。

しかし、shell:sendto でSendToディレクトリが表示されるようになったのはいつからだろうなぁ。

[IDE] Eclipse 4.7（OXYGEN）のインストール手順と日本語化

Aptanaのアップデートが止まっている！
新しいIDEを探そう！

私は以前からAptana（Aptana Studio 3）を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。

このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。

2017年の6月末にEclipseのバージョン4.7（コードネームをOXYGEN(酸素)）がリリースされており変わらず活発にアップデートがされているようです。

今回はWindows 10（64bit）でEclipseをインストールする手順をまとめてみました。

日本語化についても簡単に触れていますが不足部分はググってくださいませ。

ダウンロード

公式サイトのダウンロードページへアクセス

https://www.eclipse.org/downloads/

ダウンロードボタンをクリック。

もう一度ダウンロードボタンをクリック

ダウンロードが開始される。

お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。

インストール

ダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

よく内容を読み、Accept Nowをクリック。

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

Eclipseの日本語化といえば、Pleiades (プレアデス)。

公式サイトよりPleiadesのプラグインをダウンロード

Pleiades – Eclipse プラグイン日本語化プラグイン
http://mergedoc.osdn.jp/

日本語化の設定

詳しくはreadme_pleiades.txtを参照ください。

readme_pleiades.txtより、設定方法部分だけ以下に抜粋します。

1. pleiades_x.x.x.zip を解凍し、plugins、features ディレクトリーを <ECLIPSE_HOME> ディレクトリーに
コピー。(<ECLIPSE_HOME> は Eclipse デフォルトの plugins や features があるディレクトリー)
2. eclipse.ini の最終行に以下の 2 行を追加。Xverify は Eclipse 4.4 以降で必須で、これを指定しないと
起動できなかったり、一部の機能が正常に動作しない可能性があります。
Windows 以外の場合は後述の Eclipse 起動オプション参照してください。
-Xverify:none
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
3. Pleiades スプラッシュ画像を使う場合は
eclipse.ini の -showsplash org.eclipse.platform (実際は 2 行) を削除。

最低限1と2だけ行えばEclipseが日本語化されます。

まとめ

以前Javaでプログラムをしていた頃と比べるとロゴがおしゃれになっていたり、Eclipse Marketplace が出来ていたりと色々なアップデートが加えられているようです。

Eclipseを試してみつつ、IDE探しの旅引き続き行ってまいります。

git コマンドで突如エラー

macにコマンドライン開発者ツールをインストールして解決

今回想定するDreamweaverのサイト設定

今回のサイト設定・構造

空のディレクトリを作成しよう

scss ディレクトリ

css, css/min ディレクトリ

fonts, images, js ディレクトリ

configファイルを配置しよう

Gist：Dreamweaverでcompassを動作させようとした時のconfig.rb

config.rb

config_prod.rb

テーマディレクトリ直下に配置

サイト設定でCompassを有効化しよう

サイト設定を開く

CSSプリプロセッサー － 一般設定

Compassの設定をしよう

コンパイルされるか確かめてみよう

まとめ

WordPressの次期エディタ「Gutenberg」について学ぼう

セッションスライド

Gutenbergってなんだ？

Gutenbergを試してみたい！

Gutenberg Plugin

Gutenbergを無効化したい！

Classic Editor Plugin

Gutenbergの使い方を知りたい

編集画面

編集画面上部

右サイドバー

コンテンツエリア

どんなブロックが存在するの？

ブロックのデータはどうやって保存されるの？

これから改善されていくところやメモなど

パーマリンクの設定箇所がない

カラムを柔軟に作れない

カスタム投稿タイプで動作させるためには

編集画面が真っ白になることがある

テーマをGutenbergに対応させるには

functions.php の編集

style.css の編集

Gutenbergについて理解を深めたい！

Gutenberg Challenge

意外と使ってない！？右クリックメニューの［送る］とは。その活用方法。

［送る］の活用方法

写真や画像の保存サイズをサクッと小さくする

普段はブラウザで表示させたいけど、たまにテキストエディタで開きたいファイルを開く

すぐ出来る［送る］メニューの設定方法

［送る］メニューの設定場所（SendToディレクトリのパス）を調べる

ショートカットを配置する

Windowsバージョン別 SendToディレクトリのパス一覧表

Windows 10のSendToの場所

Windows 8 (Windows 8.1)のSendToの場所

Windows 7のSendToの場所

Windows VistaのSendToの場所

Windows 2000のSendToの場所

Windows XPのSendToの場所

Windows NT4.0のSendToの場所

Windows MeのSendToの場所

Windows 98のSendToの場所

Windows 95のSendToの場所

まとめ

Aptanaのアップデートが止まっている！ 新しいIDEを探そう！

ダウンロード

公式サイトのダウンロードページへアクセス

インストール

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

利用規約に同意

インストール完了まで待つ

インストール完了したらEclipseを起動

おおぉ！Eclipse！

ワークスペースディレクトリを指定

Eclipseが無事に起動しました

日本語化

公式サイトよりPleiadesのプラグインをダウンロード

日本語化の設定

まとめ

CSSプリプロセッサー－一般設定

Aptanaのアップデートが止まっている！
新しいIDEを探そう！