BUNNY ROBBER GRPC BLOG

Googleカレンダーをレスポンシブ化してみる 今回はAdobe Museに埋め込んだGoogleカレンダーをレスポシブ化させる方法についてです。残念ながらAdobe Muse（CC2018）の設定ではGoogleカレンダーをレスポシブ化させることは出来ません。 ネットで一通り検索して調べてみたところ、 以前の投稿 で採り上げたGoogleカレンダー埋め込み支援ツールからGoogleカレンダーのHTMLコードを取得し、そのコードをdivタグで囲んでclassを設定。更にそのclassに対してCSSのposition指定を使用してレスポンシブ化させる方法が一般的でした。 とはいってもclassやCSSについて良くわからない方もいるでしょうし、実際私もCSSでレスポンシブ化させる際のposition指定については理解できていません。 なので、今回は簡単に利用できるサイトを使用してレスポンシブ化のためのコードを取得します。 Embedresponsively.com にアクセス Googleカレンダーをレスポシブ化させるためには、下記のサイトを利用します。 Embedresponsively.com（リンク） 画面が開いたら、上に並ぶ青い文字の中の右から二つ目「 Generic iFrame 」を クリック してください。 Generic iFrameをクリック 次に、「Generic iFrame Embed:」の下にある 枠の中に、Googleカレンダー埋込支援ツールにて取得したHTMLコードを入力（コピー＆ペーストで可） し、枠の右端にある青い「 Embed 」ボタンを クリック してください。 コードを入力して、Embedをクリック そうすると枠の下にGoogleカレンダーが表示され、その下の「Embed Code:」の下にある枠にレスポンシブ用のCSSを含んだ新たなコードが出力されます。 出力されたコードをクリップボードにコピー この出力されたコードを全て選択してコピーし、Adobe Museのオブジェクトメニュー内、「HTMLを挿入...」で開いたウインドウの枠内にペーストしてください。 Adobe Muse ↓ Adobe Muse 以上の手...

はじめに、Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 皆さんはGoogleのスクリーンショットをブログ等に載せる際、ガイドラインがあることをご存知でしょうか。アドセンスの申請をしたことがある人なら、もしかしたら知っているかもしれません。 私はこれまで幾つかの投稿の中でGoogleを採り上げ、スクリーンショットを用いて解説をしてきましたが、ガイドラインが存在することを全く知りませんでした。 どのようルールなのかは後述しますが、Googleのスクリーンショットを載せるにも加工するにもガイドラインがあり、また一定の文言を併記する必要があります。 私の今までの使い方がガイドラインに違反しているのか気になって調べてみると、Googleのブランド使用許諾の中の「プロダクト画像の使用」のページに下記のように書いてありました。 プロダクト画像の使用 (C) Google プロダクト画像の使用（リンク） "スクリーンショットは「改変せずに」使用してください。スクリーンショットの上にグラフィック、写真、広告文を重ねたり、Google プロダクトの外観を変えたりすることはできません。また、Google 検索で上位にランキングされた画像を掲載するなど、ご自身の商品やサービスを宣伝する手段として Google 検索結果ページを使用することはできません。" また、 "必ず次のフレーズを Google プロダクトのスクリーンショットやデータの画像の下に配置してください。 Google および Google ロゴは Google Inc. の登録商標であり、同社の許可を得て使用しています。" とあります。 さらにページの下には「こちらのフォームからお問い合わせください」の文字があります。普段からGoogleを利用している自分としては、ガイドラインに抵触するのは気がひけます。最悪、今までの投稿内にあるスクリーンショットは全て作りなおしということもありえます。 判断に迷った私はGoogleに直接聞いてみることにしました。 (C) Google Google ブランドの使用許諾申請（リンク） ...

今回はAdobe MuseにGoogleカレンダーを埋め込む方法です。たまに見るアドビ公式のMuseのフォーラムに同様の質問があったのと、偶然見たサイトにGoogleカレンダーが埋め込まれていたことが切欠となりました。 Googleカレンダーを利用するにはGoogleのアカウントが必要なので、お持ちでない方は前もってアカウントを取得しておいてください。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 Googleカレンダーを共有化し、サイトに埋め込むためのコードを取得する はじめにGoogleカレンダーで共有化の設定 Googleカレンダーを開きます。 1. Googleのページの右上にある 四角のメニューをクリック するとパネルが開きます。 2. パネルの中にある「 カレンダー 」を クリック します。 (C) Google  3. Googleカレンダーが開いたら、画面の右上にある 歯車のアイコンをクリック します。 4. 開いたパネルの中の「 設定 」を クリック します。 (C) Google 5. 次に画面左側にある「 マイカレンダー 」から、 共有したいカレンダー名をクリック します。 (C) Google 6. マイカレンダーの設定画面になったら、上から2つめの「 アクセス権限 」の枠の中にある「 一般公開して誰でも利用できるようにする 」を クリック してください。 (C) Google 7. クリックすると警告パネルがでますが、 OKボタン を クリック してください。 (C) Google 以上の手順でサイトに埋め込みたいGoogleカレンダーに表示するマイカレンダー全てを共有化させます。 8. 共有化の設定が終わったら、「カレンダーの統合」の枠の中にある青文字「 カスタマイズ 」を クリック してください。 (C) Google OKをクリックするとGoogleカレンダー埋込支援ツールが開きます。 Googleカレンダー埋込支援ツールで埋め込み用コードを取得 Googleカレンダー埋込支援ツールでは左...

先日、Adobeから源ノ明朝というフォントがリリースされました。twitterでも話題になっていたので、知っている人も多いと思います。 知らない人のために簡単に説明すると、源ノ明朝はAdobeとGoogleが共同で開発した、誰でも自由に使えて日本語の他に中国語（簡体字と繁体字）とハングルが同梱された明朝体のフォントです。また、Googleからも同じフォントがNoto Serif CJKという名前でリリースされています。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 githubから源ノ明朝をダウンロードするも、ZIPファイルが解凍出来ない 日頃から源ノ角ゴシック（源ノ明朝に先行してリリースされた、ゴシック体のフォント）にお世話になっている身としては、絶対に外せないこのフォント。私も早速インストールしようと思い、下記アドレスのリンク先にて AdobeのダウンロードガイドPDF を参考に進めたのですが、どうにも上手くいきませんでした。 源ノ明朝のダウンロードサイト（github） https://github.com/adobe-fonts/source-han-serif/tree/release/ AdobeのダウンロードガイドPDFにあるチャート ダウンロードガイドPDFにあるチャートを参考に、私の場合は右上の「Super OTC」のZIPファイルをダウンロードしたのですが、解凍しようとダブルクリックすると、ZIPクローンが生成されてしまいました。 ダウンロードしたファイル（左）とそれをダブルクリックして生成されたクローンファイル（右）。 どうやらこれはMacOSで起きる現象らしいのですが、解決策を探してもよく解らず。。 どうにも諦められない私は発想を転換して、Googleに頼ることに。 源ノ明朝がダメならNoto Serif CJKを 前述しましたが、源ノ明朝とNoto Serif CJKは名前は違えど同じフォント。源ノ明朝にこだわるのはやめにして、Noto Serif CJKを入れることにしました。 Notoのダウンロードサイト（Google） https://www.google.com/ge...