頑張らない!でも諦めない!必死にならずにええかげん

無料ブログサービスのHTMLをEclipseで見やすく修正する(4.3.1 Kepler:日本語)

      2014/11/22

Google or AdMax Promotion(it)

無料ブログサービスを利用していて、HTMLの編集は認められているものの、
Web上の画面ではちょっと何を触っているのかよくわからない・・・。
そんな時にはEclipseを利用することで、
すこしは作業のストレスが減るかもしれません。

はじめに

無料ブログを利用するということは、
開発したり、難しいことを避けることができるのが大きなメリットです。

だからこそ、余計なことはしなくて済むのですが、それは最初のうち。
慣れてくるにつれて、あれこれ欲求が生まれてきますね。

HTMLの直接編集もその一つでしょう。

でもWebの画面で触るのって、ソースは見にくいしフィールドは小さいし、
どこのソースを触っているのかが本当にみにくいものです。

そんな時には、Eclipseをインストールしてしまった方が、
長い目でみたら楽ちんだと思いますよ。

Eclipseインストール

Eclipseのインストールについては以下でご紹介しています。
解凍して、フォルダをコピーして終了です。
Eclipseインストール方法(4.3.1 Kepler:日本語)

Eclipseを利用したHTML編集

Eclipseを利用するといっても、無料ブログとEclipseが、
ネットワークを介してつながるわけでもなんでもありません。
ただ画面表示と、編集にだけ利用します。

例としてSeesaaブログでご紹介しますが、まずはEclipseを起動します。

01_Eclipse起動

Eclipse起動

PHP版を利用するとコンテンツアシストが大文字になってしまうようで、
Ultimate(pleiades_ultimate-32bit_jre.zip)をインストールしておく方がいいのかなと感じます。
これは設定変更できるはずですが、
小文字を利用すると設定しても変更することができませんでした。

08_コンテンツアシストの違い

コンテンツアシストの違い

起動したらプロジェクトを新規に作成します。

02_新規プロジェクト作成

新規プロジェクト作成

プロジェクトはPHPプロジェクトでも作成しておきます。

03_PHPプロジェクトなどを選択

PHPプロジェクトなどを選択

プロジェクトの名称を入力し[完了]をクリックします。

04_適当にプロジェクト名を入力

適当にプロジェクト名を入力

作成されたプロジェクトから[新規]-[HTMLファイル]を選択します。

05_新規HTMLファイル作成

新規HTMLファイル作成

作成するファイル名を適宜入力し[完了]をクリックします。

06_適当にファイル名を入力

適当にファイル名を入力

HTMLが作成され、画面に表示されます。

07_作成されたHTMLファイル

作成されたHTMLファイル

SeesaaブログのHTML編集画面から、
編集したいソースをすべて選択しコピーします。
SeesaaブログのHTML編集方法については以下の投稿でご紹介しています。
Seesaa™ブログでHTMLの修正を行う方法

08_Seesaaからすべて選択コピー

Seesaaからすべて選択コピー

Eclipseで作成したHTMLをすべて選択したうえで、
Seesaaからコピーしたソースを貼り付けます。
html-edit-eclipse-freeblog_st091

10_貼り付けたソース

貼り付けたソース

貼り付けられたHTMLは色分けされて表示されます。
またタグのアウトラインがネストされて確認できます。

11_タグの表示とアウトライン表示

タグの表示とアウトライン表示

各タグ横に表示されている[+/-]をクリックすると、
タグを省略したり、展開したりして表示が変更できます。

12_タグの展開・省略

タグの展開・省略

ただし[ソース]-[フォーマット]を選択すると、
タグ自体がネストされて画面が見やすくなるのですが、
Seesaaブログには独自のタグ「<% if error_code %>」などがあるために、
実行すると変な場所に改行され、タブが入るなどし、
HTMLが壊れてしまいますので、実行しないように注意しましょう。

13_誘惑のフォーマットはタグ破壊される

誘惑のフォーマットはタグ破壊される

実際に実行するとSeesaaでエラーになります。

14_Seesaaエラー表示

Seesaaエラー表示

表示フォントの変更

画面の見栄えとして重要なのがフォントが好みに合うかという部分もあるのですが、
フォントの変更をしておきます。

[ウィンドウ]-[設定]を選択します。

15_設定の表示

設定の表示

設定ウィンドウで[一般]-[外観]-[色とフォント]を選択して表示される、
色とフォント画面より[構造化テキスト・エディター]を展開し、
[構造化テキスト・エディターのテキスト・フォント]をクリックし[編集]をクリックします。

16_構造化テキストエディタの選択

構造化テキストエディタの選択

フォントダイアログで、利用したいフォントやサイズを選択します。

17_フォント指定

フォント指定

変更した前後は以下のようになります。
好みに合った見栄えで編集できる方がストレスがすくなくて済みます^^
(画像荒くてすみません)

18_フォントによる見栄えの変化

フォントによる見栄えの変化

コンテンツアシスト

こうしたIDEではコンテンツアシストがある点が非常に便利です。
[<d]などと入力すると、選択肢が出てきて[<div></div>]まで一発で入力できます。

08_コンテンツアシストの違い

コンテンツアシストの違い

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

直接的には無料ブログに対して何かができるということはないのですが、
タグに色が付く、小さく好きなフォントでタグを表示できる。
タグのコンテンツアシストが利用できる。

実際これだけでも、HTMLの可読性がまし、作業は楽になるはずです。

また、Eclipse側にソースが常に残せるので、もし何かがあった時には、
そこからバックアップを利用して復旧できる便利さもあります。

毎回コピペしなおして、無料ブログ側でプリビューする面倒さはありますが。


Seesaaはシーサー株式会社の登録商標(第5049965号)であり、
Seesaaロゴはシーサー株式会社の登録商標(第5137457号)です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

Eclipse、Eclipseロゴは、Eclipse Foundation, Inc.の米国における商標です。
Eclipseは、開発ツールプロバイダのオープンコミュニティであるEclipse Foundation, Inc.により
構築された開発ツール統合のためのオープンプラットフォームです。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - 無料ブログ ,

  関連記事