# Flickrアプリ

このサンプルアプリでは、Flickr から画像を取得して、スライドショーをします。

## デモ

<img src="https://docs.monaca.io/images/common/import_img.png" alt="" data-size="line">  [**プロジェクトをインポート**](https://monaca.mobi/ja/directimport?pid=64081c89e78885022468f94f)

**テスト環境**

* Android 11.0
* iOS 14.3

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgK5J7YiSQxw5QBuNyt%2F-MgK67YFRmsJ6FoSGNS5%2Fimage.png?alt=media\&token=4b1c186c-0048-4be2-be2d-285b82e58abc)

## ファイル構成

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgK5J7YiSQxw5QBuNyt%2F-MgK6AkJHVWEK0PO7M3V%2Fimage.png?alt=media\&token=e763c1c6-066a-4627-89b3-db21a8d4ddcb)

| ファイル                    | 説明                           |
| ----------------------- | ---------------------------- |
| `index.html`            | スタート画面のページ                   |
| `css/style.css`         | プロジェクトのスタイルシート               |
| `js/main.js`            | プロジェクトの JavaScript ファイル      |
| `js/jquery.bxslider.js` | 写真のスライドアニメ用の Javascript ファイル |
| `images/*.png`          | このプロジェクトで使用する画像ファイル          |

## 必要な JS/CSS コンポーネント

* `jQuery`                                                  &#x20;

## HTML の解説

`index.html` ファイル内の次の記述 ( HTML の  内 ) で、タイトルバー ( title-bar )、スピナー ( loadSpinner / 「 処理中 」 を示す画像 )、コンテナ ( container ) を使用して、画像の表示を行います。

```markup
<div id="title-bar">
    <h2>Monaca Photo Viewer</h2>
</div>
<div id="loadSpinner"></div>
<div id="container"></div>
<div id="bottom">
  <img src="images/logo-monaca.png" width="160">
</div>
```

## JavaScript の解説

このサンプルアプリには、2 つのメインの関数があります。

### jsonFlickrFeed()

Flickr API の読み込み時に、`jsonFlickrFeed()` を呼び出します。Flickr API 自体は、 `index.html` の読み込み時に呼び出されます。

```markup
<script src="http://api.flickr.com/services/feeds/photos_public.gne?format=json" defer></script>
```

の一行が、index.html のヘッダー内に記述されており、ここで Flickr API を呼び出しています。この関数では、ローカル変数 `images` に取得した画像を格納して、 `displayPicture()` 関数を 1 秒毎に呼び出し、カルーセル形式のスライドショーとして、画像を表示しています。この関数の JavaScript コードを次に記します。

```javascript
var images = [];

// This function is fired when the Flickr API is loaded.
function jsonFlickrFeed(result) {
  for (var j in result.items) {
    var img = result.items[j].media.m;
    images.push(img);
  }

  // display next photo every 1 second
  setTimeout(displayPicture, 1000);
}
```

### displayPicture()

displayPicture() では、 `images` 変数に格納された画像 ( Flickr から取得 ) を、 `index.html` 内で作成したコンテナ ( container ) を使用して表示します。この関数の JavaScript コードを次に示します。

```javascript
//Display the retrieved photos from Flickr as a slide show
function displayPicture() {
  $("#container").css("visibility", "hidden");
  var $ul = $("<ul>");

  for(var j in images) {
    var srcUrl = images[j];
    li = '<li><img src="' + srcUrl + '" id ="list" width="60%"  /></li>';
    $ul.append($(li));
  }

  $("#container").append($ul);
  //Setting for photo sliding animation
  $ul.bxSlider({
    auto: true,
    pager: false,
    speed: 500,
    pause: 1800,
    controls: false,
  });

  $("#loadSpinner").remove();
  $("#container img").addClass("shadow");

  setTimeout(function() {
    $("#container").css("visibility", "visible");
  }, 1000);
}
```