はじめに
SynologyのNAS上にアップロードした画像を自作のFlutterアプリで表示しようとしたところ、思ってた方法と違ったのでここに備忘録&共有(必要な人いるのか？)として書き記します。
共有リンクから表示しようとした...
NASにアップロードされた画像は一応ネットワーク上の画像に分類されるので、FlutterであればImage.networkを使うことで表示できるはずです。
実装を始めた頃はImage.networkの引数に、共有リンクのURLを渡せば表示できるものだと思っていました。
というわけで、FileStationAPIの「SYNO.FileStation.Sharing(共有リンク取得)」を利用して、表示したい画像の共有リンクを取得し、Image.networkに渡したところ...
Flutterアプリ上の表示
コンソールログ上の表示
あら、失敗してしまいました...
エラーメッセージを見る限り、URLが適切な値じゃなかったようです。
念の為、FileStationから直に共有リンクを発行しImage.networkに渡してみたのですが、やはり同様のエラーが発生してしまいます。
試しに、共有リンクをブラウザで開いてみたところ...
うーん...確かに想定していたものと違うなと
想定していたのは、以下のようにブラウザいっぱいに画像だけが表示されるような状態
さて困りましたね...
ネットワーク画像なのにImage.networkで表示することがこれではできないようです。
渡すのはダウンロードリンクだった！
上記エラー解消のために色々と調べていたところ、興味深い記事が
Image.networkでGoogle Drive上の画像を取得しようとした話
上記記事の筆者の方はGoogleDrive上の画像を表示しようとして私と同じ問題にぶち当たったようです。
調査していくと、Image.networkに渡すURLはダウンロードリンクだということが判明。これを渡したところ、見事画像が表示されるようになったようです。
Synology FileStationでダウンロードリンクはどのように用意するかというと、FileStationAPIの「SYNO.FileStation.Download(ファイルダウンロード)」で可能なのではないかと考えました。
このAPIはクエリのmodeによって、ブラウザに表示するモードかファイルをローカルに落としてくるモードか決められるので、前者でAPIのURLを作りImage.networkに渡してみましょう。
// Uriを文字列化してURL生成
final imageUrl = Uri(
scheme: 'http',
host: '192.xxx.yyy.zzz',
port: 5000,
path: 'webapi/entry.cgi',
queryParameters: <String, dynamic>{
"api": "SYNO.FileStation.Download",
"version": "2",
"method": "download",
"path": "\"/target\"", // パスはダブルクオーテーションで囲む必要がある
"_sid": sid, // ログインAPI呼び出し時に得られるsid
},
).toString();
// Urlから画像表示
Image.network(imageUrl)
お！表示されました！
大成功です！！
おわりに
というわけで、Synology NASにアップロードした画像をFlutterのImage.networkで表示する方法でした。
Image.networkに渡すURLが、ダウンロードリンクである必要があるということに気づけなければ解決できませんでしたね。ツールは違えどGoogleDriveで調査していただいた方に感謝です。