TwitterやFacebookのウィジェットを入れたい-「ウィジェットの追加」

「LiVE for WebLiFE*」では、デフォルトでTwitterの「つぶやく」ボタンや「ティッカー」、Facebookの「いいね!」ボタン、カウントダウンなどのウィジェットを利用できる。左サイドにある「ウィジェットの追加」ボタン(図39)をクリックすると「追加ウィジェット一覧」が表示される(図40)。

図39:「ウィジェットの追加」ボタンをクリック

図40:「追加ウィジェット一覧」ダイアログ

利用できるウィジェットは、「Facebook」系、「Twitter」系、「バルーン」、「カウントダウン」、「リッチテキスト」、「サウンド」、「ドットナビ」、「方向ナビ」、「その他」にカテゴライズされている。「Facebook」系(図41)は、デフォルトで「いいね!ボタン」、「Facebookコメント」、「Facebook LikeBox」が利用できる。配置やデザインパターンは複数あるので気に入ったものを選ぼう。

図41:「Facebook」系ウィジェット。左が「いいね!ボタン」、右が「Facebook LikeBox」

「Twitter」系(図42)は、「つぶやくボタン」、「ティッカー」、「フォローボタン」が利用できる

「バルーン」(図43)は、Webサイトに貼り付ける吹き出し型のメッセージボックスだ。何か強調したいことがある場合に利用するとよいだろう。バルーンに表示されているテキストは、LiVEに入っている画像編集アプリの「SiGN Pro」で編集することができる。

図43:三つの「バルーン」パターン、他にも複数サンプルあり

「カウントダウン」(図44)は、文字通り日付のカウントダウンを表示するウィジェット。バルーン同様「SiGN Pro」でテキストなどの編集をすることができる。

図44:「カウントダウン」ウィジェット。大中小とデジタル時計風のサンプルあり

「リッチテキスト」(図45)は、テキストを画像などと組合せてより強い演出効果を持たせたウィジェット。表示する回数を設定したり、またHTMLタグも使えるので、ブログパーツやサウンドプレイヤーなど外部のAPIサービスを読み込ませたりすることができる。APIの選択次第では、大きく拡張できるパーツであるとも言えるだろう。

図45:「リッチテキスト」ウィジェット。スライド上に画像を貼り付けることができる。文字の編集は「SiGN」で行う

これ以外にも「サウンド」、「ドットナビ」、「方向ナビ」などデザインを変更したい場合に有効だ。

「LiVE for WebLiFE*」を使ったウェブサイト完成までの流れ

サイトを作成するための下準備はすべて完了したので最後に完成までのワークフローを見ておこう。具体的には、下図(図46)のような流れになる。

図46:サイト作成ワークフロー

それでは、次回の後編では、実際にこのワークフローにそってウェブサイトを構築する。請うご期待。