スクールフォト販売サイト「スナップスナップ」の使い心地が残念。 半分自動化して時短したよ!!


娘は幼稚園に通っていますが、一番初めに驚いたのは園内イベントの写真販売方法でした。今の時代はなんとインターネットで写真を購入します。
我が家も何度か購入していますが中々使いづらい。
自分なりに少しでも労力を減らす仕組みを考えました。

スポンサーリンク

イベント写真はオンラインで

自分の幼少時代の頃は正直覚えていませんが、大人になってから子供の頃の写真を見ると、何かしらのイベントの写真がちょこちょことあります。運動会やら遠足やら。
やっぱりそれよりも多いのは家族写真。
旅行に行った時のものであったり、入園式、卒園式などです。

幼稚園でのイベントなどの写真は多く残っていないかなというのが正直な感想です。

それが今では幼稚園のイベントすべて写真撮影してるんじゃないかというくらいです。
最近だと
1月:お餅つき大会
2月:豆まきイベント
3月:ひな祭り会、卒園式
などなど。

撮影後、約一週間以内には写真一覧をネット上に掲載してくれます。
親としては、子供の幼稚園での生活がよくわかるのでとてもありがたいサービスではあります。

昔に比べてはるかに便利になったと思いつつもやっぱり小さな所に不満は出てきてしまうものです。
……贅沢なんでしょうけどもorz

スクールフォト販売サイト「スナップスナップ」

子供が通っている幼稚園での写真販売はスナップスナップという会社が行っています。
スナップスナップ
スナップスナップは、こどもたちの生き生きとした瞬間を『カタチ=写真』にしてお届けするサービスです。

イベント毎にカメラマンさんが写真撮影をして、それをオンライン上に配信してくれるというもの。
イベントにもよりますが、運動会の時にはカメラマン数名がグラウンドを園児より元気に走り回っていましたw

そこで撮影された写真はスナップスナップで公開されます。
もちろんサイトは会員制でその幼稚園に関わっていない人は見ることが出来ません。
IDとパスワードを入力すると、専用サイトが開き、各イベントへのリンクがあるってな具合です。

うちの子はどこ?

イベント事に写真はまとめられています。
例えば豆まきイベント。
幼稚園の先生が鬼に扮して各教室を周って園児たちが豆まきをするってな感じです。
この豆まきの時のカテゴリ分けはとてもわかり易く使いやすいものでした。

各教室毎で写真の区分けがされていて、自分の子の組のページにいけばあっさりと写真が見つかります。


探しづらい例としてはひな祭りイベント。
ホールや体育館などに集まってそこで園児全員でひな祭りをしています。

こうなるとコンテンツの分け方として組で分けず、
「イメージカット」やら、「午前の部」など園児全員の中から探すということになります。
また1イベントで数百枚もの写真が公開されるため、一枚一枚確認しないといけません。
これもサムネイル表示でわかるわけもなく、一枚一枚画像を拡大して表示させる必要性があります。

そこにが……

罠1:時間がかかる

誰でも想像つきそうですがw
サムネイルをクリックして画像を表示した後、自分の子を探す
というのを数百回繰り返さないといけません。

毎回豆まきのように組で分けられていれば我慢できるのですが、園児全員が参加するタイプのイベントではこの作業が必須になります。また、それ以外の園内の様子(例えば昼食とか登園時)の写真は確認しないといけません。

すごく時間泥棒です。

罠2:レスポンスが悪い

時間がかかるのに加えて、サイトのレスポンスが悪いんです。
まずページにサムネイルが表示される。

そのサムネイル1つ1つに砂時計状態が続く…
我が家はNURO光(以前の記事参照)なのでこちらの問題では無いかなと思います。
NURO光を使ってみての感想
さて、我が家でインターネットが使えるようになってから2週間。 うちのインターネット環境であるNURO光について少し記載しようと思います。 というか、感想。 さて、ざーっと雑感を記載しようと思います。 それなりに速い(光という意味で) サポー...




そして画像が表示され始めるのですが、スクロールするごとに新しいサムネイルが読み込まれるという感じのサイトの作りです。ある程度スクロールするとまた砂時計…

そこで拡大するために画像をクリックすると、拡大画像を読み込むためにまた砂時計….



待たせすぎじゃないですか!



すべての写真を確認するのに最低1時間はかかりますorz

遅い原因は多分1つのサーバーに複数サイトがあるような状態で運用しているからかもしれません。
少し調べたところ、スナップスナップにリンクしてあるサイトの一部は同一サーバーで運用しているようです。
(同一IPを使っているからという判断です)
似たような写真販売サイトを運営しているので掛かる負荷も相当なものだと予想出来ます。 他にも原因はあるかもしれませんが、これが1つの要因かなと考えられます。




そして、、、うちの子はどこ!!!!




となってしまうわけですw

最終的に2~3枚しか写ってないとかもあったり。。。

どうにかならないか

確認に時間がかかるのをどうしても減らしたいと思いました。
とりあえず、画像表示レスポンスが遅いのが改善されれば多少は確認する時間が減らせるかなと思い、画像を保存することにしました。

少し調べるうちに仕組みがわかったのですが、私自身にプログラミング能力が無いので半分手作業ですw
スポンサーリンク

どうにかする方法

まずはザクッと手順を。そして自己責任でお願いします。

※2016/08/24 現在、この手順では出来ない可能性があるので注意してください。
  1. firefoxのアドオン「DownThemAll!」を入れる
  2. ダウンロードしたいページを表示する(サムネイル画像が表示されるところ)。この時にしっかり下までスクロールしてすべての画像を読み込むこと
  3. DownThemAll!を起動して、「画像とメディア」を選択し、すべての画像に対して「ダウンロードをする」にチェックする
  4. 「後でダウンロード」を押す(ここで別UIがポップアップ)
  5. ポップアップしたUI内でCtrl+Aで全選択後右クリック – 詳細 – 選択した項目をファイルにエクスポートを選び、txt形式で任意の場所に保存する
  6. テキストファイルを開き置換する
  7. 置換が完了したら保存して、ポップアップしたUI内のリストをすべて消去して、右クリック – 詳細 – インポート にてtxtファイルを読み込む
  8. 開始
ってな具合です。肝は「DownThemAll!」というアドオンを使うこと、そのままではサムネイル画像しか取得できないので少し手を加えてあげることです。それが手順6です。
手順6で、一括でURLを置換します。
置換は正規表現を使って以下のようにします。

検索文字列:\/pp\/2\/w1
置換後文字列:/r/tn

に加えて行末にサイズを追加します。
(行末のサイズは一定の法則がありますが、毎回異なるので都度確認してから)

ここまでやったら後は一括で画像を取得します。

サーバーに負荷がかからないように同時接続数を1にしています。

もう少し頑張って欲しい!

子供の写真を多く撮影してくれてそれを素早くオンラインにおいてくれるのはとてもありがたいサービスです。けどもう少し頑張って欲しいとは個人的に思います。
せめて、学年で分けてくれると探す手間も省けるなと思います。

サイト表示のレスポンス上げるだけでも購入してくれる人が増えるサービスだなと思いました。

↓↓↓ブログランキングに参加しています。m(_ _)m ↓↓↓

ブログランキング・にほんブログ村へ

コメント

  1. lod より:

    こんにちは。とても参考になります。

    一点、お教え下さい。

    > に加えて行末にサイズを追加します。
    > (行末のサイズは一定の法則がありますが、毎回異なるので都度確認してから)

    とありますが、URLの最後に追加するサイズとは、画像のサイズということですか?その追加の仕方がよくわからないのですが、「都度確認」の方法を教えて頂けませんでしょうか。

    申し訳ございませんが、よろしくお願いします。

    • anz-m より:

      lodさん>
      コメントありがとうございます。

      ノートパソコンを購入してから最近めっきりスナップスナップを見ておらず(嫁に任せていました…)、確認したところ、現状に即してない状態になってしまっています(´・ω・`)
      言葉で伝わるか心配ですが、下に書きますね。

      > とありますが、URLの最後に追加するサイズとは、画像のサイズということですか?
      > その追加の仕方がよくわからないのですが、「都度確認」の方法を教えて頂けませんでしょうか。
      任意の写真いずれか一枚開きます。開くと、ブラウザの画面内に拡大したり出来るような画面が出てくると思います。
      その画面に対してマウスを合わせてブラウザの下部を確認すると、
      1185×850などと記載の入ったURLが表示されていると思います。
      それが、画像サイズです。

      DownThemAll!! では順番にリスト化されるため、縦と横が何番目に来たかを覚えておき、
      1185×850 と 850×1185 を順番に入力していきます。
      実際は1185×850ではないので注意してくださいね。

      が、今では少し対策がとられているようで、もう少し直さないといけません。

      私の環境では、以下の追加が必要なことを確認しています。
      ・行末に「pc_watermark_6_v/0/画像サイズ/16進の文字列_画像サイズ」が必要
      ・16進の文字列の決まりは、縦向きの写真の場合画像サイズの直前に「0x50」、横向き写真の場合「50×0」という値を入れてあげること(例なので異なるかもしれません)
      でした。

      もしかしたら人によって異なる可能性があるのでお役に立てるかわかりませんが…。

      それぞれのURLの共通性は把握しているので、もう少しスキルがあれば動的に取得出来ると思うのですが。。。すみません。

      lodさんのおかげで、現在記載してある手順ではうまくいかないことがわかりましたので、その旨を追記しました。

      より良い方法が見つかれば、更新しますね。

  2. lod より:

    早々に丁寧なご回答を頂き、ありがとうございます!

    実はご質問を差し上げたあとにも自分で試行錯誤をし、ソースを見ることによって、

     > に加えて行末にサイズを追加します。

    とおっしゃっていることがだいたい理解でき、「pc_watermark_6_v/0/画像サイズ/16進の文字列_画像サイズ」の標記にもたどり着くことができました。

    ですが、「都度確認」については、個別の数値が存在するということに気付かず、とりあえずすべてに最初に確認した同じサイズの数値を追加してみたのですが、そうしたところ縦の画像も横になってダウンロードができたので、ダウンロード後に90度回転をすればいいだけのようでしたよ。

    どちらにしましても、私の場合は大変参考になりまして、おかげさまで無事目的が達成できそうですし、ゆっくりと画像が選べそうで、とても助かりました。

    たいへんありがとうございました。
    今後ともまた、いろいろと参考にさせて下さい。

    • anz-m より:

      lodさん>
      コメントありがとうございます!

      早速試して頂き、無事にダウンロードできたようで何よりです。

      > ダウンロード後に90度回転をすればいいだけのようでしたよ。
      そうなんですね! であれば気にしなくてもよさそうですね。
      回転するだけのほうが楽ですしね。情報ありがとうございます。

      …スナップスナップがもう少し使いやすくなればいいんですけどねw