フリーペーパー T-BASE NEWS とは？

今話題のアートソフビを取り扱うT-BASE JAPANから発行されたフリーペーパー。

大人気の作家さんを特集し、やコラボ商品などの紹介をしております。

T-BASE NEWS Vol.9（紙版）を、手に入れるには？

T-BASE NEWS はトイズキンググループのサービスの利用された方や、T-BASE 店頭で配布をしております。

※部数がなくなり次第、配布は終了となります。

T-BASE NEWS Vol.9（電子版）を、手に入れるには？

T-BASE NEWS Vol.9　は現在こちらからダウンロードする事が出来ます。

フリーペーパー T-BASE NEWS Vol.9　〜特集「【GODZILLA VINYL ART】 ゴジラ1995 ノーマル・バーニングレッドカラー・・・etc  」

スタッフちゃん

【gas】PlacesAPI(new) textsearchで2ページ目、3ページ目(21件以上のデータ)を取得する方法

Plaecs API(new)では1リクエストで1ページ分（20件）のデータを取得することができます

現状では最大3リクエスト60件分のデータを取得することがでます。

この上限60件は今後変更の可能性があります。

2、3回目リクエストの際にパラメータに加えます

fieldsには1回目からnextPageTokenを追加しておく

2回目と3回目のリクエストの前に2.3秒時間を作ります

トークンをすぐに有効にならない場合があるため

textsearchリクエストエンドポイント

　const url =” https://places.googleapis.com/v1/places:searchText

　const fields = “places.displayName,places.formatteAddress,nextPageToken”;

　//↑施設名、住所、トークンを取得

　UrlFetchApp.fetch();を使ってリクエストを送信しデータを取得

const response = UrlFetchApp.fetch(url,option);

//json.parseしてgetContentTextで文字列として取得します。

const data = json.parse(response.getContentText());

//.placesはAPIのレスポンス構造（キー）

const nexturl =  “https://places.googleapis.com/v1/places:searchText?key=${apiKey}&pageToken=${nextPageToken}&fields=${fields}”;

//apiKeyとfieldsは1回目のリクエストの時と同じものを使用する

1回目のリクエストで取得したnextPageTokenをパラメータに加える

2回目と3回目のリクエストを送信する前に待機時間を作る

21件以上取得できない場合はnextPageTokenが取得できていない可能性があるのでLogger.log();で確認する

検索結果が20件の時や19件以下の時は検索キーワードを変更が必要かもしれません

urlと一緒にfetchするoptionを再定義する

1回目と同じようにリクエストを送信し、2,3ページ目を取得します

2,3回目のUrlFetchApp.fetchの前にUtilities.sleep(3000);で3秒待ちます

後藤 颯良

google Places API (new)　とは　できることと使い方

google mapの情報位置情報httpリクエストを受け取ることができるAIPで施設名、住所、電話番号などのデータを取得することが出来ます。

（郵便番号、緯度経度、レビューの数、星の数、口コミ）

googleが提供するサービスにアクセスすることができ外部で利用することが出来ます

提供されているサービスはメールや通訳、マップなどの様々なものがありますよ

GCPでプロジェクトを作成し、GCPコンソールでPlacesAPIを有効にしてAPIキーを作成します

エンドポイント(URL)に取得したい情報や条件とAPIキーを合わせてリクエストを送信します

エンドポイント：https://places.googleapis.com/v1/places:searchText

google APIはGCPクラウドサービスから提供されています

GCPはストレージやデータベースなど多くのサービス提供しています

google cloud console（GCPコンソール）

GCPのサービスを管理、監視するインターフェース

googleのAPIを利用するために必要で

google cloud consoleを使って生成します

apikeyは第三者や外部に漏れないように管理する

googleAPIは利用料によって料金が発生します

無料枠があるのでそれを超えないように注意する

npm run build(scriptフィールドでbuildの置き換えを作成)

ビルドしないとjavascriptやcssがバンドルされず、変更が反映されない

webpackが動いていないとjavascriptやcssのコードが読み込まれない

変更がある場合は都度手動でビルドする必要がある

npm run buildしなくてもファイル変更時に変更があった部分だけを自動でビルドが行われる

–mode development –watchで開発環境の時だけに設定することもできる

webpack-cliはコマンドラインツールでこれをインストールしないと

wwebpackをインストールしただけではbuildやwatchなどのコマンドを使うことができない

複数のエントリーポイントを作成する場合は出力先を複数作る必要があるため filename: “[name].js” を使ってそれぞれのエントリーポイントの名前で出力する

エントリーの名前は自由に決められる

filename: “[name].js” で作成されたファイルは出力ファイルのため処理を書いてもビルドした際に削除される

となるように記述する(webpackファイルのoutput:path:の相対パス)

cssのurl()メソッドを無視してバンドルされ別リソースとして扱われてそのまま表示される

url: false,を設定していないとrequire()に変換され画像が適切に変換されない場合があります

webpack押さえておくポイント

webpack.config.jsファイルのフィールドやプロパティの内容・役割

node.jsのグローバル関数で現在のスクリプトが存在するディレクトリまでのパスが入っています

optionsでurl()メソッドを使えなくしたり、ソースマップを表示させることができる

javascriptに変換されたcssをstyleタグとしてhtmlに挿入

※sass-loader,css-loader,style-loaderの記述する順番

必ずsass→css→styleの順番になるようにloaderを配置していく

loaderを複数使用する場合は後ろから処理されていくのでstyle-loaderから記述していく必要がある

postcssを使えるようにするローダー

postcsspluginでcssの強化することができる

autoprefixer　cssのベンダーフレックスを自動的に追加

変数や関数に型を指定できるjavascriptでエラーが起きにくく、対処もしやすい

バンドルするファイルをどこから探すかを指定する

優先して探すファイルも指定することもできる

testはローダーを適用するファイルそのものを指定

resolveはtestで指定したファイルを探すファイルを指定

（testもresolveも拡張子で指定する）

jqueryのインポートを省略してモジュールを自動で読み込ませることができる

自動的にjqueryを読み込み、グローバルで使えるようにする

AE(アフターエフェクト）を使ってできる数字をランダムカウント動画の作成方法についてご紹介します。

１：新規平面作成/テキストの入力

新規コンポジション作成＞新規平面(コマンド/コントロール＋Y）を作成します。

文字ツールでテキスト（数字）を入力します。

入力した文字を配置をします。

2：テキストに「文字のオフセット」を適用する

入力した数字を選択したまま＞テキストのアニメータープロパティを追加＞文字のオフセットを適用します。

テキストレイヤーのタブを開き、テキスト＞アニメータ＞文字のオフセットの数値を変更します。

するとテキストの数字が変化します。

オフセットの数値の下1桁＋入力したテキストのそれぞれの桁の数字＝表示される数字になります。

オフセットの数値/1　＋　入力したテキストの数字/2025　＝　表示される数字/3136

オフセットの数値/9　＋　入力したテキストの数字/2025　＝　表示される数字/1914

オフセットの数値を「0」の状態で開始時間にキーフレームを打ちます。

次に、任意の秒数（今回は10秒）でオフセットに任意の数値（今回は100）を入力してキーフレームを打ちます。

これで、カウントアップされるアニメーションが作成できました。

キーフレームの開始と終了の数値の差によって表示スピードが変化します。

開始:0＞終了:10　数値の変化するスピードが遅い

開始:0＞終了:100　数値の変化するスピードが速い

作成した動画はこちらになります。

ランダムカウントアニメーションの作り方

T-BASE NEWS Vol.8（紙版）を、手に入れるには？

T-BASE NEWS Vol.8（電子版）を、手に入れるには？

T-BASE NEWS Vol.8　は現在こちらからダウンロードする事が出来ます。

フリーペーパー T-BASE NEWS Vol.8　〜特集「T-BASE 池袋P’PARCO店 OPEN・・・etc  」

AE(アフターエフェクト）を使ってできる数字のカウントアップ/ダウン動画の作成方法についてご紹介します。

新規コンポジション作成＞新規平面(command/Ctrl＋Y）を作成します。

文字ツールでテキスト（数字）を入力します。その後、入力した文字を配置をします。

数字に「スライダー制御」を適用する

数字レイヤーを選択した状態で、メニューバーから

”エフェクト”＞”エクスプレッション制御”＞”スライダー制御”を適用します。

テキストレイヤーのタブを開き、「ソーステキスト」の横にある”ピックウイップ”（グルグルマーク🌀）を選択し、エフェクトコントロールパネルの「「スライダー制御＞スライダー」までドラッグ＆ドロップして紐付けさせます。

すると数字が自動的に「0」になります。

スライダーの数値を入力/変更することによって数字を動かすことが可能になります。
スライダーの数値を「0」の状態で開始時間にキーフレームを打ちます。

次に、任意の秒数（今回は5秒）でスライダーに任意の数値（今回は5）を入力してキーフレームを打ちます。

カウントダウンの場合はスライダーの数値を大きい数字＞小さい数字に変化させます。

このまま再生すると、小数点以下が表示されてしまうのでエクスプレッションで桁数を制御します。

ソーステキストのタブを開き、「エクスプレッション：ソーステキスト」の横にeffect("スライダー制御")("スライダー")と記述されています。

数字を整数にするためにMath.round(をeffectの前に入力します。その後("スライダー")の後ろを）と入力して閉じます。（半角の閉じ括弧）

↓このような記述になります。

Math.round(effect("スライダー制御")(1))

すると表示される数字が整数になりました。

・Math.round←（小数点以下を四捨五入する）

・effect("スライダー制御")(1).value.toFixed(0) ←Fixed(0)の数字を変更することで小数点以下を変更可能

・Math.floor(effect("スライダー制御")(1)) ←（小数点以下を切り捨てする）

・Math.ceil(effect("スライダー制御")(1)) ←（切り上げする）

こちらで基本的なカウントアップ/ダウン動画は完成です！

イージーイーズを適用して速さを調整する

キーフレーム二つを選択＞メニューバー＞アニメーション＞キーフレーム補助＞イージーイーズを選択。（もしくはショートカットキー”F9）

グラフを調整して開始：ゆっくり＞終了：はやい。または、開始：はやい＞終了：ゆっくりのように緩急をつけることができます。

↓最初早い＞徐々に遅くなるよう調整

数字の前後に単位などのテキストを差し込む

2025"年"のように後に差し込む場合:

〜("スライダー制御")("スライダー"))+”◯”

"令和"7年のように前に差し込む場合:

※◯←西暦や年、％など差し込むテキスト内容

コチラが作成した動画になります。

カウントアップ/ダウンアニメーションのつくり方

複数のファイルとまとめ（バンドル）るツールのこと

ファイルをまとめることでHTTPリクエストを減らすことができます

主にjavascriptファイルをまとめる際に使用します(cssや画像も扱える)

npmを使ってwebpackをインストールします

webpack.config.jsファイルから設定を記述していきます

（プロジェクトのルートディレクトリに作成）

javascriptしか扱うことのできないwebpackを

ローダーを使う（モジュール化）ことでcssや画像もjavascriptモジュールとして扱うことができバンドルできるようにすることができます

webpackはjavascriptしか対応してない

ローダーを使ってcssや画像をjavascriptに変換する

モジュールとはコードを分割した部品のようのようなものです

内部モジュールと外部モジュールの2つに分けられます

entry: ‘エントリーポイントを相対パスで記述’

エントリーポイント：webpackがバンドルを開始する起点になるjavascriptファイルのこと

（エントリーポイントは複数作ることもできる）

filename：バンドルして出力するファイル名を指定

　　test：ローダーを適用するファイルを正規表現で指定

　　exclude：ローダーを適用しないファイルを絶対パスで指定

use使用するローダーが複数ある場合は後ろから処理されます

webpackとは　webpack.config.jsファイルの内容

URLの後に追記する文字列のことで

複数ページがあるサイトのページ数を指定して表示させたり

サイト内の検索結果を表示を表示させたりすることができます

Googleアナリティクスを使ってwebサイトを見に来たユーザーがどこから来たのかを追跡したり、ユーザーにクリックされた回数を集計することができます。

utm_source、utm_medium、utm_campaign、utm_term、utm_content の 5種類のパラメータがあります

それぞれのパラメータの後に=とパラメータの値を記述します

この5種類のパラメータを書く順番は決まっていなくて好きな順番で書くことができます

（ですが後から見る時に見辛くなってしまうのでなるべく順番を揃えましょう）

URLの末尾に「？」で始まり「&」で結合します

source、medium、campaignの三つは必ず記述する必要があります

term、contentの二つは省略することができます

http://〇〇〇〇〇〇〇〇?utm_source=google&utm_medium=test-email&utm_campaign=test_btn

スペースは使えないので「-」や「_」を使って文字を繋げます

大文字と小文字を区別するので使い分けてパラメータの値をつける

構造的になっているので後で見やすいようにパラメータの値には一貫性を持たせる

urlが長くなりすぎてしまう場合は短縮urlサービスを使う

「レポート」→「集客」から見ることができます

映像・デザイン・ウェブ媒体の企画デザイン

©2023 TOYSKING TECH LABO

映像
企画・制作

プロモーション動画
YOUTUBE動画
SNS動画制作

コンテンツ
企画・制作

キャラクターコンテンツ
イラスト・コミック
商品・グッズ制作

ウェブ
企画・制作

ECサイト管理・運用
システム開発

デザイン
企画・制作

ウェブデザイン　制作
フリーペーパー　制作

TOYSKING TECH LABO では、様々なクリエィティブの制作をしています。
自社でのネット・紙媒体の企画・デザインや、社内でのシステム開発にいたるまで幅広い人材が活躍しています。

制作物・関連記事一覧

TOYSKING TECH LABOにて企画・制作を行ったクリエイティブの紹介となります。

フリーペーパー T-BASE NEWS Vol.9　〜特集「【GODZILLA VINYL ART】ゴジラ1995 ノーマル・バーニングレッドカラー・・・etc 」
2ヶ月前

【gas】PlacesAPI(new) textsearchで2ページ目、3ページ目(21件以上のデータ)を取得する方法
2ヶ月前

google Places API (new)　とは　できることと使い方
2ヶ月前

webpack押さえておくポイント
2ヶ月前

webpack.config.jsファイルのフィールドやプロパティの内容・役割
2ヶ月前

ランダムカウントアニメーションの作り方
2ヶ月前

フリーペーパー T-BASE NEWS Vol.8　〜特集「T-BASE 池袋P’PARCO店 OPEN・・・etc 」
3ヶ月前

カウントアップ/ダウンアニメーションのつくり方
3ヶ月前

webpackとは　webpack.config.jsファイルの内容
3ヶ月前

utmパラメータとは？書き方と注意
3ヶ月前

toyskingtech タグ付き記事

TOYSKING TECH では、ホビー総合メディアである
TOYSKING.newsを運営しております。

制作に関する相談・お問い合わせ

映像・デザイン・ウェブ媒体の企画デザイン

©2023 TOYSKING TECH LABO

映像企画・制作

プロモーション動画YOUTUBE動画SNS動画 制作

コンテンツ企画・制作

キャラクターコンテンツイラスト・コミック商品・グッズ制作

ウェブ企画・制作

ECサイト管理・運用システム開発

デザイン企画・制作

ウェブデザイン 制作フリーペーパー 制作

TOYSKING TECH LABO では、様々なクリエィティブの制作をしています。自社でのネット・紙媒体の企画・デザインや、社内でのシステム開発にいたるまで幅広い人材が活躍しています。

制作物・関連記事一覧

TOYSKING TECH LABOにて企画・制作を行ったクリエイティブの紹介となります。

【gas】PlacesAPI(new) textsearchで2ページ目、3ページ目(21件以上のデータ)を取得する方法2ヶ月前

google Places API (new) とは できることと使い方2ヶ月前

webpack押さえておくポイント2ヶ月前

webpack.config.jsファイルのフィールドやプロパティの内容・役割2ヶ月前

ランダムカウントアニメーションの作り方2ヶ月前

フリーペーパー T-BASE NEWS Vol.8 〜特集「T-BASE 池袋P’PARCO店 OPEN・・・etc 」3ヶ月前

カウントアップ/ダウンアニメーションのつくり方3ヶ月前

webpackとは webpack.config.jsファイルの内容3ヶ月前

utmパラメータとは？書き方と注意3ヶ月前