2021年8月11日水曜日

スプレッドシートの埋め込み機能を分析する 動画解説付き

お陰様でYoutuberとして…着実に?頑張っています。
只今のチャンネル登録者数はこんな感じです。←コツコツぶりを記録しているスプレッドシート
 
 この↑グラフは、Googleスプレッドシートにグラフを作ると、機能として、ウェブに公開という機能があり、何も考えなくても、iflameのテキストが生成されて表示できます。

しかし、グラフじゃなく入力画面そのものをネットに表示させたい時というのがあると思います。
それに対して、↑このグラフは、 range=H7:L25 と、範囲を指定し、この範囲を表示させるというものです。 この書き方が、諸説ありまして、私も実は毎回悩んでいたので今回整理します。
<iframe 
frameborder="0"  線なし
height="407"  これは若干大きめにしておくとキレイに表示される
scrolling="no"  スクロールなし
seamless=""  シームレス設定  この書き方はGoogleがやっていたので…
src= 
    "https://docs.google.com/spreadsheets/d/e/[個別ID]/ 
    pubhtml?  結局、これになる
    gid=0  これがないと表示されない これはウェブに公開のところで数字は変わるようです!
    &amp;  &の特殊文字変換の記入 google site は&でもOK
        single=true  シングルシートの場合
    &amp; 
        range=H7:L25  範囲指定
    &amp; 
        widget=false  これがないと下にタブの名前が出る
    &amp; 
        chrome=false  これがないとタイトルが表示される
    &amp; 
        headers=false  ヘッダー表示なし
    &amp; 
        output=html" html変換(なくても動く)
width="660"></iframe> Youtubeは100%で書くとキレイに表示しますが、スプレッドシートの場合はPixelを設定しないとうまくいかない。
たぶん最後のhtmlいらないと思うけど、なんとなく書いてないと不安なので書いてる感じ。後、ぴったりの範囲を表示させると、周囲の線が消えるので、一つ上下にセルを追加しておくとキレイに表示されます。グリッドは自分で書いておいて全体のグリッド線は非表示にします。

エンドユーザーが使い慣れたスプレッドシートで編集し、それがキレイにホームページに表示されるのは便利かと思います。複雑な表組みもスプレッドシートなら簡単です。
Googleサイトにおいては、挿入の埋め込みから利用します。

なお、Google siteの場合 frameborderの指定を0にしても、左に線が残る場合がありますが、この場合はstyleをiframeに追加して、margin-left:-10px;などと指定して消します。実例

Googleサイトで作る時に、タブレット表示でキレイに出るのはWidth=600のようです。
でも、iPadだと飛び出ます…


このスプレッドシートの埋め込み機能は、オンラインドキュメントの良さがあって、ホントに便利かと思いますが、たまに、利用者は、なぜスプレッドシートがホームページに反映されるのか理解できない人がいて説明に苦労する場合があるので…
こんな計算を表示させることもできるよ!


とにかく、深く考えず、この表を更新したら、指定された範囲がホームページに表示されるんですよと伝えるのだけどねー。

まぁ。これからの若い人なんかは、スプレッドシートの方がエクセルより便利だ!と思うと思うのですけど…

では、一応、上のグラフの表示のHTMLも書いておきます(PCのみ表示)のでテストしてみてください。


最後に、画像で生成したグラフも貼っときます
チャンネル登録 よろしくね!
メガネを探すので、イヤリングのようにメガネにつけました。買っただけでは動かなかった。ついてる電池がもう死んでました。電池もわりとすぐなくなります。よく鳴らすのでw

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)

 約束しないと、送信できません。再度の場合はリロードが必要です。


0 コメント :

コメントを投稿

コメントありがとうございます。


サイト内検索


View My Stats