2017年2月3日 テクノロジー

【第4回】フラミンゴで始めるPCサイトからスマホサイトへの変換 〜IDEで開発開始!《後半》〜

こんにちは、アイスリーデザインの荒澤です。
前回は『フラミンゴIDE上でのソースコードの書き方』についてご説明いたしました。

▼前回の記事はこちら▼

2017-01-19
こんにちは、アイスリーデザインの荒澤です。 さて、前回は『フラミンゴIDEについて』までをご紹介いたしました。

今回は『スニペット』と『ファイルのアップロードの仕方』についてご説明します!

目次

 

1.スニペットを作成してみよう

最初に、第2回目の記事の『3-1.フラミンゴIDEのアイコンについて(左側編)』で名前だけ紹介しました『スニペット』についてお話します。

スニペットとは、よく使うソースコードの塊です。
同じコードを何度も、または複数のテンプレートに入れる時にスニペットはとっても便利です!
今回は他のテンプレートにも存在し、どのページでも同じコードで記述されているheadタグを例に実装していきます。

それでは、最初にフラミンゴIDE画面の左側にあるスニペットマネージャーをクリックしましょう。

12

クリックすると表示されるのが、スニペットマネージャーです。

それではまず、スニペットマネージャーの上部に表示されている『+新規スニペット』ボタンをクリックします。

13

クリックすると、スニペットの名前を入力するフォームが表示されます。

14

名前は自由に決めて問題ありません!
今回はheadタグなので『html_head』とします。
入力したら、『OK』ボタンを押します。

1

『html_head』のスニペットが完成しました。

それでは、編集していきましょう。

ソースコードは挿入したいコードを書きますが、今回はheadタグの中身をそのままコピーしていきます。

2

これで編集は終了です。

次に、トップページのテンプレートにこのスニペットを挿入しましょう。
トップページにかかれているheadタグのソースコードを削除します。

3

それでは、スニペットを挿入してみます。
IDE画面の下部にある『スニペットを挿入』ボタンをクリックします。

15

すると、作ったスニペットの一覧が表示されるので、入れたいスニペットをクリックします。

16

これでスニペットの挿入は終了です!

17

画像のように、スニペットが表示されました!

また、このやり方でなくても、

18


上記のコードを書くことでスニペットを呼び出す事ができます。
 

2.ファイルをアップロードしてみよう

今回はサイト内に画像があるので、画像やCSSファイルを例にアップロードしてみましょう。
ここで登場するのが、『ファイルマネージャー』です。
ファイルマネージャーがどこにあるかは第2回目の記事で説明しましたが、フラミンゴIDE画面の左側のバーにある雲のアイコンです!

27

それでは、クリックして開いてみましょう。

24

上の画像のようなページが表示されます。
CSSとjsのファイルが既に表示されていますね。

今回は画像をアップロードしたいので、imageフォルダを作成してみます。
作成の仕方はとっても簡単!
1.右上の『+新規追加』ボタンをクリックし『フォルダ』をクリックします。

4

2.フォルダの名前を入力します。
『フォルダ』をクリックするとポップアップのようなものが表示されます。
今回はイメージフォルダを作成しますので、『image』にします。

5

3.終了
簡単ですね。

それでは、実際に画像をアップロードしてみましょう。
まず、アップロードしたいフォルダをクリックします。
今回は画像をアップロードしますので『image』フォルダをクリックします。

25

すると、上の画像のように表示されます。

『このフォルダは空です。ドラッグ&ドロップでファイルをアップロードしてください。』

テキストの通り、難しい手順を踏まなくてもドラッグ&ドロップでアップロードができるのですごく簡単!
ドラッグしたら……

26

 

6

フラミンゴが読み込んで…

7

アップロード完了です!

8

これで、アップロードされた画像にオンマウスすると….

9

このように画像の情報を見ることができ、削除したりダウンロードすることも可能です。
また、画像の名前も変更できます!
オンマウスで表示されたポップアップの右上にある鉛筆マークをクリックすることで、名前の変更が可能となっています。

CSSファイルやjsファイルも同じようにアップロードすることができます。
それだけでなく、アップロードされたCSSファイルやjsファイルをクリックすると編集画面に遷移し、IDE上で直接編集することも可能です。

それでは、CSSファイルもアップロードしてみましょう。
CSSファイルを追加する方法は2つあります。
1つ目はドラッグ&ドロップでアップロードする方法、2つ目はIDE上で新規に作成する方法です。
それでは、1つ目をご説明します。
まず、ファイルマネージャーを開きます。CSSフォルダは最初から作成されているので、クリックしましょう。

22

クリックしたらPCサイトに使用しているCSSファイルをドラッグ&ドロップでアップロードします!
これで完了です。

2つ目の新規にCSSファイルを作成したい方は、右上に表示されている『+新規作成』をクリックし、『CSSファイル』をクリックすることで作成されます。

21

 

19

新規作成したら、そのファイルの名前を編集して完了です。

20

そして、編集したいファイルをクリックすることで、

23

編集画面に遷移します。

10

以上、ファイルや画像のアップロード方法をご説明しました。
さらに詳しく知りたい方はファイルマネージャーのページをご覧ください。

アップデートをしたファイルをページにリンクさせるためには、

上記のコードを書く必要があります。
書く場所は下の画像の位置になります。

11

 

28

画像はsrc属性のところに、jsファイルでもsrc属性のところに、cssファイルならhref属性のところに上記のソースコードを書くことで、読み込むことができます。

次回はついにリリースの手順についてご説明します。
それでは『変換完成。いよいよリリース!』でお会いしましょう!!
 

2017-03-16
こんにちは、アイスリーデザインの荒澤です。 だんだんと暖かくなってきましたね。 前回は、フラミンゴIDE上でのソ
 

Haruka Arasawa

h.arasawa

2016年にご縁がありi3DESIGNに入社。大学では史学科に所属し中世フランス史を研究していたバリバリの文系。ITの知識は無いものの、パソコンを触ることが好きでこの世界に飛び込む。実家で飼っている愛猫とゲームが大好き。

この記事をシェアする