SIS Lab
>
Blog
>
AngularJSでFlickrの埋め込みタグを作成する

AngularJSでFlickrの埋め込みタグを作成する

更新日:2019.04.27 作成日:2014.11.08

ブログ用に自分のFlickrフォトストリームから画像を選択して、貼り付け用URLを作りたくなったので、AngularJSで作ってみた。

参考

こういうときのドットインストールはとても便利。

angularjs-flickr.html

<html ng-app="FlickrPhotos">
  <head>
    <script src="angular.min.js"></script>
    <script src="photo_controller.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
  </head>
  <body ng-controller="PhotoCtrl">
    <h1>Make Markdown URL for Flickr</h1>
    <div class="col-md-12">
      <label>Time: </label>
      <input type="text" ng-model="time">
      <button ng-click="doSearch()">Search</button>
      <div ng-show="loadingIndicator"><img src="loading-indicator.gif"></div>
    </div>
    <div class="col-md-6">
      <h2>My photos</h2>
      <div>
        <ul>
          <div ng-repeat="photo in photos">
          <li>
            <input type="checkbox" ng-model="photo" id="photo-{{photo.id}}" ng-change="selected({{$index}})">
            <h2>{{photo.title}}</h2>
            <img ng-src="https://farm{{photo.farm}}.static.flickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}_z.jpg">
          </li>
        </ul>
        </div>
      </div> 
    </div>
    <div class="col-md-6">
      <h2>Selected</h2>
        <textarea class="form-control" row="3">{{markdown}}</textarea>
        <div ng-repeat="photo in photos | filter:selectedFilter">
          <h2>{{photo.title}}</h2>
          <img class="img-responsive" src="https://farm{{photo.farm}}.static.flickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}_m.jpg">
        </div>
    </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
</html>

photo_contoroller.js

var App = angular.module('FlickrPhotos', []);

App.controller('PhotoCtrl', function RepoListCtrl($scope, $http) {

  $scope.markdown = "";

  $scope.doSearch = function() {
    $http.jsonp("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=API_KEY&user_id=35571855%40N06&sort=date-posted-desc&format=json&jsoncallback=JSON_CALLBACK")
      .success(function(data) {
        $scope.photos = data.photos.photo;
        $scope.loadingIndicator = false;
      });
    $scope.loadingIndicator = true;
  }

  $scope.selectedFilter = function(photo) {
    return photo.selected == true;
  }

  $scope.selected = function(index) {
  	$scope.photos[index].selected = true;
  	$scope.markdown = $scope.markdown + makeLinkTag($scope.photos[index]);
  }

  function makeLinkTag(photo) {
  	return '<p><a href="https://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '" title="' + photo.title + 'by meganii, on Flickr"><img class="img-responsive" src="https://farm' + photo.farm + '.staticflickr.com/' + photo.server +'/' + photo.id + '_' + photo.secret + '_z.jpg" alt="' + photo.title + '"></a></p>\n';
  }

  $scope.titleFilter = function(photo) {
    if (!$scope.filterWord || $scope.filterWord.length == 0) return true;
    return photo.title.indexOf($scope.filterWord) >= 0;
  }
})