(2017.2.5追記。NeonではJavaScriptの自動補完ができないので、Mars.2を使うことにしました。linuxBean14.04(142)Eclipse Mars 2のインストール参照。)
前の関連記事：linuxBean14.04(140)LibreOfficeのマイマクロフォルダをEclipse4.6のworkspaceにする
Static Web Projectを作成してhtmlをEclipseの内部ブラウザで表示する
EclipseはlinuxBean14.04(133)Eclipse4.6(Neon)とPyDev5.4のインストールのEclipse IDE for JavaScript and Web Developersを使います。
Projectの種類によってworkspaceを切り替えることにします。
File→Switch Workspace→Other.
Bloggerというフォルダを作成してWorkspaceにしました。
Settingsはコピーしませんでした。
Eclipseが再起動したら、File→New→Other。
Web→Static Web Project。
Next。
Project nameをPageNavi3_Bloggerとしました。
このままFinish。
Webパースペクティブを開くか聞かれるのでYes。
Welcomeタブを消すとWebパースペクティブが現れます。
Project ExplorerでPageNavi3_Bloggerを右クリック→New→HTML File。
ファイル名はindex.htmlにしてFinish。
titleをPageNavi3_Blogger、bodyにテストブログへのリンクをいれて保存しました。
Project ExplorerでPageNavi3_Bloggerプロジェクト内のWebContetフォルダ内のindex.htmlを右クリック→Run As→Run on Server。
このままFinish。
Always use this server when running this projectにチェックつけておくと、次回からサーバー選択ダイアログがでてこずに一発でブラウザが開きます。
Jettyサーバーが起動してEclipseのブラウザビューが開き、そこにindex.htmlが開きます。
URLはこのようになっています。
Eclipseのプロジェクト内にjsファイルとcssファイルを作成する
ページナビのJavaScriptをテストブログに読み込ませることにします。
Project ExplorerでPageNavi3_Bloggerを右クリック→New→JavaScript Source File。
ファイル名をPageNavi3_Blogger.jsにしてFinish。
PageNavi2_Blogger/PageNavi2_Blogger.js at e88a1994cd572f164b04ea1307f580d3c2f5f542 · p--q/PageNavi2_Blogger
このコードをPageNavi3_Blogger.jsにコピペして保存します。
http://localhost:8080/PageNavi3_Blogger/PageNavi3_Blogger.js
このURLでPageNavi3_Blogger.jsにアクセスできました。
Eclipseの内部ブラウザを開くにはWindow→Show View→Other、General→Internal Web Browser、で開きます。
cssも使っているのでcssファイルを使います。
Project ExplorerでPageNavi3_Bloggerを右クリック→New→Other。
Web→CSS File。
Next。
ファイル名をpagenavi.cssにしてFinish。
PageNavi2_Blogger/pagenavi.css at 35b9229907f7f7a12c3ea9697190c16462fea45a · p--q/PageNavi2_Blogger · GitHub
この中身をpagenavi.cssに入れて保存します。
http://localhost:8080/PageNavi3_Blogger/pagenavi.css
Eclipseのプロジェクト内のファイルをBloggerに読み込ませる
<link rel="stylesheet" type="text/css" href="http://localhost:8080/PageNavi3_Blogger/pagenavi.css" /> <script src = "http://localhost:8080/PageNavi3_Blogger/PageNavi3_Blogger.js"></script>BloggerのブログのHTML/JavaScriptガジェットにこのコードをいれて保存します。
これでindex.htmlを開いてテストブログのリンクをクリックすると内部ブラウザにテストブログが表示されてページナビが読みこまれます、、、
ページボタンの並びが縦になっています。
同じPCのChromiumで読み込むとちゃんとページボタンが横になっています。
Firefoxでもちゃんと横になっています。
Eclipseの内部ブラウザはflexboxに対応していないようです。
起動するブラウザをChromiumに変更する
Window→Preferences。
General→Web Browser。
Newボタンをクリック。
NameをChromium、Locationを/usr/bin/chromium-browserとしてOK。
Use external web browserを選択して、Chromiumにチェックをつけます。
Project ExplorerでPageNavi3_Bloggerプロジェクト内のWebContetフォルダ内のindex.htmlを右クリック→Run As→Run on Server。
Finish。
これでChromiumが起動してindex.htmlが表示されました。
Eclipseを使う方法の欠点
NetBeans8.1を使った方法(linuxBean14.04(125)Bloggerで使うJavaScriptの開発環境:その2)に比べて不便なところは、jsファイルを編集して保存しても、すぐにChromiumに反映されないことです。
いつ更新されるかわからないので、jsファイルを保存したらいちいちサーバーをRestartさせています。
NetBeans Connectorに該当するものを探してみましたが、適当なものはみつかりませんでした。
Google Code Archive - Long-term storage for Google Code Project Hosting.
これが該当したようですがすでに開発終了していて、後継のものは探し出せませんでした。
Eclipse neon.2 (4.6.2)ではJavaScriptのコード補完ができない
Bug 507782 – javascript content assist don't work in eclipse neon
Eclipse neon.1からJavaScriptのコンパイラーをRhinoからEsprimaに変わり、さらにneon.2からClosureCompilerに変わるためまだコード補完に対応していないそうです。
JavaScriptエディタでalt+/キーを押しても空っぽのウィンドウが表示されるだけです。
後から考えれば補完機能を使うときはほとんどないのですが、でてこないと不安だったので、JavaScriptはMars.2で開発することにしました。(linuxBean14.04(142)Eclipse Mars 2のインストール参照)
参考にしたサイト
Using JSDT #2 : Run First Project | Eclipsed
このチュートリアルを元にしました。
0 件のコメント:
コメントを投稿