無料でサイトを公開できるGoogle サイトは、googleドライブなど他のGoogleツールとの相性が良く、また、大きな広告も入らないということで、簡単なページで構成するようなサイトには使い勝手の良いツールと言えよう。しかし、画像やテキストボックスなどいろいろな要素を簡単に挿入できるのが便利であるという反面、見た目の良いデザインのページを作るには制約がある。
本稿では、デフォルトの要素にはない「スライドショー」と「スライダー」を、HTML埋め込み機能を使って、ページに挿入する方法に関して記述する。
すなわち、Google Driveにアップロードした画像をスライドのソースとして、スライドショー（Slideshow）とスライダー（Slider）を作成する方法に関する投稿である。
google drive にアップロードされた画像を、自分のサイトに埋め込むには、以下のコードを挿入したいところに記述すればよい。
<img src=”https://drive.google.com/uc?export=view&id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b”>
ここで、id=以下の文字列は、該当画像のgoogle drive の共有リンクを取得した時に得られるidである。
（共有リンクは、https://drive.google.com/open?id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b、となっている）
以下のGoogleSitesのページに、スライドショーとスライダーのサンプルを、作成方法、HTML/CSSコードとともに示した。
・スライドショー： https://sites.google.com/view/slideshow-on-gglsites
・スライダー ： https://sites.google.com/view/slider-on-gglsites
なお、ここで使用したHTMLとCSSのコードは、それぞれ、本サイトの「フェイドイン・アウト型スライドショー（レスポンシブ）」、「スライダー/左右移動型２(レスポンシブ)」と全く同じものである。
グーグルサイトのページにスライドショーを入れたのですが、iPhoneではページ内のスライドショーが表示されません。PCやアンドロイドでは見られるのですが。
ご指摘ありがとうございます。確かに表示されませんね。
このサイトの他の稿のページのスライドショーは、iphone でも正常に表示されます。
したがって、グーグルサイトに埋め込んだcss animationが正常に表示されないということになります。iphone でcss animation が正常に動かない例がグーグルサイトに限らず数多くあるようですので、何らかの相性の問題があるのではないかと思います。
残念ながら、今私には対処法をお示しする知見がありません。
検討を課題とさせてください。もし解決法がありましたら、書き込みをお願いいたします。
これってcss animation が正常に動かないのが原因じゃないと思いますよ。
Googleドライブ上に置いた写真のIMGタグを作成しても、実際にWEB上でそれにアクセスする際にリダイレクトが発生します。iOSのSafariにかぎってリダイレクトされた画像は表示されません。そのほかのOSのブラウザでは問題ありません。
これを回避するためにはGoogleドライブ以外の場所に画像をおき、その画像の共有リンクからIMGタグを作成すれば大丈夫のはずです。
例えばDropBox上に写真を置い場合、共有リンクからIMGタグを作成し、末尾をraw=1にすれば、このWEBで書かれているスライドショーもiOSのSafariで問題なく動作します。
yasdom さん、コメントありがとうございます。
そうなんですね。参考にさせていただきます。