すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

Aptana Studioがインストールできない(エラー発生)時の対処法

プログラミング

こんにちは、すずしんです。

今日は、プログラミングの開発環境を構築していました。
その際に、「Aptana Studio」という統合開発環境(IDE)を導入しようとしたのですが…。
普通にインストールしようとするとエラーになってしまいます。
そこで、対処法を調べて実践してみたところ、何とか無事にインストールができました。

これは同じ問題で悩む人がいるかもしれないと思いましたので…。
今回の記事では、Aptana Studioがエラー発生でインストールできない時の対処法について、まとめておきたいと思います。

Aptana Studioとは?

Aptana Studioというのは、Eclipseベースでオープンソースの高機能なWebオーサリングツールです。
HTML5/CSS3/JavaScriptに標準で対応しています。
プラグインを追加することで、PHPやRuby on Railsの開発にも利用することができます。

Aptana Studioは以下のページからダウンロードできます。
もし興味があるのなら、ぜひダウンロードしてみてくださいね。

Aptana | Download Aptana Studio 3.6.1

インストール時のエラー

Aptana Studioをダウンロードして、いざインストール作業をしてみたのですが…。
その際に、以下のようなメッセージが出てインストールができませんでした。

Failded to currently acquire installer_nodejs_windows.msi file: CRC error

このエラー内容から察するに、Node.jsがインストールされていないからだと推測されますが…。
ただ、Node.jsをインストールしていても、このエラーが発生するようです。
これは困りましたね…。

対処法

そこで、対処法を探してみたところ、以下の記事を見つけました。
この方法で試してみたところ上手くいきましたね。

qiita.com

やり方としては、まずダウンロードしたファイル(私の場合はAptana_Studio_3_Setup_3.6.1.exe)を、自分の分かりやすいところ(ここではデスクトップ)に配置します。
そして、コマンドプロンプトを起動して、カレントディレクトリをファイルを配置した場所に移動します。

cd "C:\Users\(ユーザー名)\Desktop"

そして、以下のようなコードを入力して実行します。

Aptana_Studio_3_Setup_3.6.1.exe /passive /norestart

これでうまくいけば、Aptana Studioがインストールされて、デスクトップにAptana Studioのショートカットアイコンが作成されるはずです。

ひとこと

インストーラーから普通にインストールできれば特に問題無いのですが…。
時々、こういったトラブルが発生するときがあるのですよね。
最初に対処法を見つけた方は、本当にすごいと思いますよ。

ひとまず、これでAptana Studioが使えるようになりましたね。
今後は、Aptana Studioを使いながら、PHPやRuby on RailsといったWebプログラミングの学習をしていこうと思っています。
さぁ、気合いを入れて頑張ろうっと!

テキストを蛍光ペン風にマーキングするCSSの設定方法

f:id:Suzushin:20170524131105j:plain

こんにちは、すずしんです。

他の方のブログの記事を読んでいると…。
文字の強調の手段として、蛍光ペンマーキングしたような線が使われていることがあります。
例えば、こんな風にテキストにひかれているのですよね。

これを見ていて、私もぜひ使ってみたいなと思いましたので…。
今回このマーカーを使えるようにしてみました。
手順としては、CSSでちょっと設定してやるだけです。

蛍光ペンマーカーの設定(CSS)

蛍光ペンマーカーの設定には「linear-gradient」属性を使用します。
これを使って、backgroundプロパティに設定してやります。

線の太さの設定

比率を指定している部分(0%, 60%など)の値を変えることで、線の太さを変えることができます。

細い線

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

太い線

.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}

線の色の設定

マーカーの色を変更するには、linear-gradient属性の後に指定している色(#ffff33)の値を変えれば良いです。

黄色

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

青色

.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}

オレンジ色

.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}

緑色

.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}

サンプル蛍光マーカー

これまでに作成したものをベースに、蛍光マーカーのCSSサンプルを用意しました。
もしこれらのデザインで良ければ、以下のコードをコピーして、お使いのブログのCSSに追加してください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」になります。

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}
.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}
.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}
.marker-blue-thick {
  background: linear-gradient(transparent 0%, #33ffff 0%);
}
.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}
.marker-orange-thick {
  background: linear-gradient(transparent 0%, #ffa500 0%);
}
.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}
.marker-green-thick {
  background: linear-gradient(transparent 0%, #54b240 0%);
}

テキストにマーキングする方法

テキストにこの蛍光ペンマーキングを適用するには…。
線を引きたい部分のテキストをspanタグで囲い、そのclass属性に適用したい蛍光ペンのクラスを指定します。

例えば、テキストにオレンジの線を引きたい場合には以下のようにします。

このようにするとオレンジの線が引かれます。

<span class="marker-orange">このようにするとオレンジの線が引かれます。</span>

ひとこと

今回の記事では、蛍光ペン風の線を引けるようにするCSSの設定方法について書いてみました。
実際やってみると分かりますが、非常に簡単に実現することができましたね。

文字の強調には、文字を太くするという方法もありますが…。
今回のように蛍光ペンを引くと分かりやすいですし、思わず線を引いたところを見てしまいますね。
蛍光ペンによる強調効果は抜群ですよ。
今後は、文章中に強調したいフレーズが出てきたら、積極的にマーキングしていこうと思います。

今回のカスタマイズは、非常に簡単にできますので…。
ぜひあなたもブログで蛍光ペン風の線を引けるようにしてみませんか?

はてなブログの目次のデザインをCSSで変更する方法

f:id:Suzushin:20170429140030j:plain

こんばんは、すずしんです。

はてなブログでは、目次を記事に表示することができるのですが…。
デフォルトのデザインだと、目次が何というか味気ないですね。

そこで、CSSを使って目次のデザインを変更してみることにしました。
もし、このデザインが気に入って頂ければ、ぜひコピペして利用してみてください。

目次の表示方法

記事に目次を表示するには、記事の表示したい場所に[:contents]と書きます。
表示したい場所の行頭に記述してくださいね。
文字や空白を入れてはいけませんので注意してください。
プレビューを見てみると、正しく書いてあれば目次が挿入されているはずです。

f:id:Suzushin:20170510174447j:plain

目次のデザインの変更方法

目次がどのようなタグ構成になっているかを、ソースコードを見て確認してみました。
すると、例えば以下のようになっていることが分かりました。

<ul class="table-of-contents">
    <li><a href="#開閉式ボックスとは">開閉式ボックスとは?</a></li>
    <li><a href="#アニメーション付き開閉式ボックスのサンプルプログラム">アニメーション付き開閉式ボックスのサンプルプログラム</a></li>
    <li><a href="#サンプルプログラムの実行例">サンプルプログラムの実行例</a></li>
    <li><a href="#ひとこと">ひとこと</a></li>
</ul>

なるほど。
table-of-contentsというクラスが付加されているulタグと、liタグで構成されているようですね。
この例では無いですが…。
中見出しや小見出しがある場合には、ulタグがさらに含まれるのだと思います。

ということは…。
このtable-of-contentsを目安にしながらCSSを適用してやれば、目次のデザインが変更できそうだという事が分かります。

「目次」の表記の追加

ところで、このデフォルトの目次。
「目次」という表記がありませんよね?
これってあった方が良いと思いませんか?

そこで、後述するCSSでは…。
この「目次」という表示がされるようにしたいと思います。

そのやり方というのは、分かってしまえば実は簡単なのです。
table-of-contentsのbefore疑似要素を参照して、そのcontentプロパティに「目次」と指定してやるだけです。

.table-of-contents:before {
  content: "目次";
}

目次のデザインのサンプル例

それでは、実際に目次のデザインをしていきたいと思います。
ここでは、目次を立体的に見せてみることにします。

以下のCSSのソースコードをコピーしてください。
そして、ダッシュボードから「デザイン」→「カスタマイズ」と進んでいきます。
「CSSデザイン」と書かれたテキストエリアの部分に、コピーしたコードを貼り付けてください。

.table-of-contents:before {
  content: "目次";
  font-size: 150%;
  font-weight: bold;
}
.table-of-contents {
  box-shadow: 5px 5px 10px;
  border: 1px solid #999999;
  background: #f0f0f0;
}

もしシンプルに影は要らないという場合には、box-shadowの記述を削除してください。

ちなみに、このデザイン例は白背景のテーマを使っている場合のデザインです。
黒背景のテーマを使っている場合には、このCSSをそのまま使うと目立ちすぎますので…。
適宜、backgroundプロパティやborderプロパティなどを調整してください。

ひとこと

記事の目次のデザインを変更するには…。
table-of-contentsクラスを参照して、CSSを適用すれば良いという事が分かりました。

今回の記事では、立体的な目次のデザイン例を紹介しましたが…。
デフォルトの目次のデザインと比べれば、いくらかはスタイリッシュになったのではないでしょうか?
気に入ってもらえたら嬉しいです。