fein's personal site

個人サイト制作：サイトマップへ戻る

Google Driveを活用してサーバーの容量不足を解消する

昨今のAI学習問題から、個人サイトを制作する方が増える一方です。
御自身でhtmlを書ける方に関しては、レンタルサーバーにホームページを作り込んでいく人もおられますよね。
さーっとTwitterを見るだけでもそういう人がたくさんいます。

しかし、ここで問題になりがちなのが「レンタルサーバーの容量が少ないからイラストを収めきれない…」というもの。
これは「Google Drive」など、外部のクラウドストレージを使って簡単に解決することができます。

Googleアカウントさえ作ればいいGoogle Drive

つまり、Androidユーザーならほぼ間違いなく使える手段ということです。
別にOneDriveとかでも良いですよね。
目的は何でもかんでもレンタルサーバーに突っ込むんじゃなくて、画像や動画など、ファイルサイズが大きくなりがちなものだけ外部のクラウドストレージから持って来ましょうというだけのことですよ。

まずは完成品をお見せします。
こんな感じです。

次はやり方を書いていきますね。

Google Driveにある画像を個人サイトに表示する方法

まず、Google Drive上で次のように操作します。

1. Google Driveにアップロードしたメディアを開く
2. 共有リンクを発行する
3. 右上の３点リーダーのメニューから「新しいウィンドウで開く」をクリック
4. 右上の３点リーダーのメニューから「アイテムを埋め込む」をクリック

この操作は2024年11月現在のものです。
Google Driveはちょいちょい操作や仕様が変わるから注意してください。
操作を丸暗記するというより「共有リンクをもらってからフレームなどhtmlを取得する手順」と考えて頂いたほうがよろしいかと。

次はGoogle Driveから取得したhtmlコードを自分のサイトに書き込みます。
デフォルトで付いているサイズ設定などを削除しつつ、次のように書いてみましょう。

Google Driveから画像を持ってくるhtml

<div class="responsive-googledriveimage">
  <iframe src="https://drive.google.com/file/d/長い英数字によるファイルID/preview" allow="autoplay"></iframe>
</div>
    

単純なコードです。
divタグにclassを付けつつ枠組みを作り、その中にGoogle Driveから持ってきたhtmlフレームを入れます。
デフォルトで付いているwidthなどのサイズ設定は削除しておきましょう。
人それぞれのサイトによってbodyのレスポンシブデザインは違いますから、サイズ設定は各自がcssで行います。

では、次にcssを見ていきます。
ただ単に画像を表示するだけではつまらないから、少し額縁のようなデザインを施してみました。

Google Driveから画像を持ってくるcss

.responsive-googledriveimage {
 position: relative;
 width: 90%;
 overflow: hidden;
 padding-top: 56.25%;
 border: 10px solid #d2b48c;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 border-radius: 10px;
}

.responsive-googledriveimage iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 0;
}
    

.responsive-googledriveimage

position: relative;

要素の位置を相対的に設定します。
内部の絶対位置を持つ要素（iframeなど）の基準となる位置を提供します。

width: 90%;

要素の幅を親要素の幅の90%に設定します。
こうすることで、画像の要素が親要素に対して適度に収まります。

overflow: hidden;

要素の枠外にはみ出したコンテンツは表示されないように設定します。

padding-top: 56.25%;

高さを幅の56.25%に設定します。
この値は16:9のアスペクト比を維持するためのものです。
高さを指定せずにアスペクト比を維持するためのテクニックです。

border: 10px solid #d2b48c;

要素に10ピクセルの幅で、薄い茶色 (#d2b48c) のボーダーを追加します。
これが額縁の外観を作ります。

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

要素にシャドウ効果を追加します。
これは要素の周りに10ピクセルのぼかしを持つ影を与え、立体感を持たせます。

border-radius: 10px;

要素の角を10ピクセルの半径で丸めます。
私も頻用するテクニックですが、こうすると柔らかい印象が生まれます。

.responsive-googledriveimage iframe

position: absolute;

要素の位置を絶対的に設定します。
親要素（.responsive-googledriveimage）を基準に位置を決定します。

top: 0;

要素の上端を親要素の上端に合わせます。

left: 0;

要素の左端を親要素の左端に合わせます。

width: 100%;

要素の幅を親要素の幅全体に設定します。

height: 100%;

要素の高さを親要素の高さ全体に設定します。

border: 0;

要素の境界線をなくします。
iframe内のコンテンツがスッキリと表示していきましょう。

Google Driveからhtmlを取得して、それをcssで整える。
元の画像にノイズやウォーターマークなどを付けておけば、AI学習や無断転載から守ることもできます。

ダウンロード禁止もできるがAI除けは忘れずに

このスクリーンショットのように共有リンクの設定を変更することで、ダウンロードを抑止することもできます。

しかしこのような設定は相手のクラウドストレージ側の仕様に左右される上に、仕様変更がかかると後から設定しなおすのが面倒です。
これに関しては画像そのものにノイズやウォーターマークを入れることで対応して頂いたほうが、後々のことを考えるとラクでしょう。

やはりhtmlを書けた方が良いかもね…

せっかくですから、もう一つ事例をお見せします。
綺麗な花だと思いませんか？

こんな感じで、いかようにもできるわけですよ。
高度なプログラミングのテクニックを習得する必要はありませんが、俗に言うフロントエンドと呼ばれるhtml・css・JavaScriptさえ書ければ、かなりの自由が利きます。
JavaScriptは見送るにしても、簡単なhtmlとcssさえ少しでも分かるなら、Webデザインの教科書にあるコードを改変しながら自分のサイトに設置していくこともできます。
なおかつ他のプログラムまで書ければ、不可視的ウォーターマークまで何十枚もの画像に一括挿入するようなことだってできる。
AIのクローラーに対処することさえできれば良いと考えるなら、少しコードが書けるだけでも十分かと。

「どのサービスが良いか」という話ですと、そのWebサービスがAI学習するぞと脅してくるたびに、引っ越しを余儀なくされることになります。
その引っ越しは膨大な手作業となり、創作活動の支障となります。
そもそもレイアウトが自由にならないしね…
正直なことをお話しすると、これを機に少しでいいからWeb制作の世界に入って頂けると…
後々までラクなんじゃないかなーと、思うわけです。