# 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

![](/files/-MgK67YFRmsJ6FoSGNS5)

## ファイル構成

![](/files/-MgK6AkJHVWEK0PO7M3V)

| ファイル                    | 説明                           |
| ----------------------- | ---------------------------- |
| `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);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/sampleapp/samples/flickr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.