FC2ブログでEdge Animateを使う方法
130311_00.jpg
前エントリに引き続き、Edge Animateの話です。通常のWebサイトなら、Edge Animateで作ってしまえば、あとのアップロードはごく簡単。しかし、FC2ブログ(しかも無料ユーザ)の場合は一筋縄では行かないのです。ではどうするか? やりたい人が何人いるかは不明ですが、その方法を書き留めておきますね(ある程度HTMLがいじれる人を対象にしています)。

Edge Animateでパブリッシュすると、下記のような構成でファイルが書き出されます。
130311_01.jpg
通常のWEBサイトなら、このディレクトリ構造と保ったままFTPにアップロードすればいいのですが、FC2ブログの無料ユーザはFTPアップロードができません。また、FC2の場合はデータを別のサーバにおいて呼び出すことも不可能です。

そこで、ファイルをすべて同じ階層に置く前提で、この階層をばらします。

130311_02.jpg
ばらすとこんな感じになります。

階層をフラットにするということは、当然ながら各ファイル内のコードも変更が必要になります。コード内で、どのファイルを呼び出すか、という部分を書き換えていかなければいけません。

書き換える部分は何カ所かあります。

…と、その前に。

FC2ブログでは、ファイル名の途中に「.(ドット)」が含まれるファイルはアップロードできません。Edgeで書き出されたファイルの中に「edge.2.0.1.min.js」と「jquery-1.7.1.min.js」という名称のファイルがありますが、まずはこれをリネームします。「edge201min.js」と「jquery-171min.js」とかにしておくといいでしょう。

続いて、いよいよコードの書き換え。

最初に「プロジェクト名_edgePreload.js」というファイル。
これをHTMLエディタで開きます。

130311_03.jpg
コードの終わりのあたりに、jsファイルなどを読み込む記述がありますので、これらをすべて絶対パスで書き換えましょう。絶対パスがわからない場合は、いったんFC2ブログのアップロード機能を使ってファイルをアップしてみればわかります。
130311_04.jpg

続いて「プロジェクト名_edge.js」ファイルも開きます。
こちらは、プロジェクトで使っている画像ファイル分だけ書き換える必要があります。
130311_05.jpg
こんな感じで「im+"ファイル名"」と記述されている部分が何カ所かあるはずですので、これも絶対パスに書き換えます。ポイントは「im+」という部分を削除して絶対パスを書き込むことです。
130311_06.jpg


ここまで準備ができたら、FC2ブログのアップロード機能を使ってファイルを全部アップします。

そのあと、FC2のテンプレートの編集を呼び出して、HTMLを編集すればいいだけです。
ヘッダにjsを呼び出すためのコードを入れ、Edgeパーツを入れたい場所にもコードを書き加えます。
そのコードは、Edgeで書き出された「プロジェクト名.html」ファイルを見ればすぐにわかるのではないでしょうか。


以上、FC2ブログ(無料版)でEdgeコンテンツを入れこむ方法でした。FTPアップロードに対応していないほかのブログサービスにも応用できるかもしれません。やってみてだめなら、コメントやメールでご相談くださいませ。

関連記事

作成日:2014/03/11/23:20 || カテゴリー:Web制作


<<JPEGファイルをCamera RAWで開く方法 | Top | Edge Animateを使う上での3つのポイント>>


コメント
このコメントは管理人のみ閲覧できます
【2014/10/27 07:16】 | [ 編集] | top↑





コメントの投稿












管理者にだけないしょコメントをおくる



Trackback
Trackback URL
→http://junkdo.blog29.fc2.com/tb.php/145-0789e0c0
FC2blog user only

| Topページ |