ウェブDeBLOG|トライデントコンピュータ専門学校 Webデザイン学科

2024.01.03 [水] 「いいね!」ボタンをGoogleスプレッドシートとGASで作る

最終更新:2024.01.05Webサイト制作TipsWeb技術

新年あけまして、おめでとうございます。
年明け早々、大きな地震際し、心よりお見舞い申し上げます。

そういえば、Facebookの「いいね」ボタンが仕事をしなくなって随分と経ちます。
このブログの対象となる若者はFacebookはつかわないので、思い切って削除したのですのが、それでもやはり「いいね!」って反応してもらいたいもので、どうしようかと考えていました。
プラグインなども考えましたが、他でも使いたいのと「いいね」数を反映・集計などがしやすい方法として、Googleスプレッドシートを利用することにしました。

likebtn-001.jpg

仕様

良いと思った記事の「いいね!」ボタンがクリックされた数値が表示されるだけの単純な機能ですが、意外とやることが多かったので、どんなことができる仕組みにするか考えます。

  1. 「いいね」をクリックすると表示がかわり数値が増える
  2. 「いいね」が押された総数を表示
  3. 間違えたら、もう一度押せば解除できる
  4. 解除された時、記録してあるデータも削除される
  5. 再読み込みしても「いいね」の状態は維持される

1はフロントで処理ができるが、2〜5はスプレッドシートを操作して記録しておく必要があるので、早速GoogleスプレッドシートとGoogle Apps Scriptで設定していきます。

Google スプレッドシートの設定

普通に「新しいスプレッドシートを作成」で空白のスプレッドシートを制作します。
ファイル名は何でもいいので、「いいね記事」にしておきます。

likebtn-002.jpg

「いいね」が押されるとこのシートに、①タイムスタンプ、②記事タイトル、③記事URLが追加されるようにします。
まずは、メニューの「拡張機能」>「Apps Script」を選ぶと、Apps Script画面が表示されます。プロジェクト名はなんでも良いので「いいね取得」としておきます。

likebtn-003.jpg

「いいね」ボタンをクリックすると<form>から送られた内容を、タイムスタンプと共にスプレッドシートに記録していきます。

dopost関数

結構、試行錯誤しながらコードを書いていったので、最終形を紹介して解説していきます。

function doPost(e) {
  if(e.parameter.like){
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  sheet.insertRowBefore(1);
  sheet.getRange(1,1).setValue((new Date).toLocaleString('ja-JP'));
  sheet.getRange(1,2).setValue(e.parameter.pageTitle);
  sheet.getRange(1,3).setValue(e.parameter.titleURL);
  trashRow(sheet);
  }else if(!e.parameter.like){
    toggleLike(e.parameter.titleURL);
  }
}

現在あるfunction myfunction(){...}は削除してfunction dopost(e){...}で関数の定義をしていきます。dopost関数は、Apps Scriptでは必須です。
引数eの中には、<form>から送られた情報が入っています。

eの中に送られるHTMLは、「いいね」ボタン部分と<form>の構成になっています。

HTML(いいねボタン)

初期はグレーのアイコンが、「いいね」とクリック(タップ)するとカラーになり、数値が1つ上がるボタンとなっています。

likebtn-004.jpg

CSS

CSSは、形や大きさを調整しています。class="liked"の有無で表示を切り替えるようにしています。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#likeBtn {
  fill: #d6d1d0;
  border: 1px solid #d6d1d0;
  transition: all 0.3s ease-in;
  height: 20px;
  display: flex;
  align-items: center;
  width: auto;
  padding: 2px;
  border-radius: 3px;
}

#likeBtn svg,
#likeBtn polygon {
  height: 100%;
  pointer-events: none;
}

#likeBtn span {
  font-size: 13px;
  margin-left: 2px;
  pointer-events: none;
}

#likeBtn.liked {
  fill: #e8594b;
  border: 1px solid #e8594b;
}

#likeBtn .checkmark {
  visibility: hidden;
}

#likeBtn.liked .checkmark {
  visibility: visible;
}

HTML(form)

<form>は値を入力するためではなく、Apps Scriptに値を送るために使うのでstyle="display: none;"で非表示にしています。

JavaScript(form操作)

値としては、JavaScriptで操作し、表示されているWebページのtitleをname="pageTitle"、URLをname="titleURL"に設定し、すでに「いいね」ボタンが押されているかをinput type="checkbox"で渡します。

let num, liked;
const likeSpan = document.getElementById("likeSpan");
const likeBtn = document.getElementById("likeBtn");
const pageTitle = document.getElementById("thisTitle");
const url = document.getElementById("thisUrl");
const checkbox = document.getElementById("isLike");
const localSt = localStorage.getItem("mylike");

pageTitle.value = document.title;
url.value = location.href;

if (localSt) {
  likeBtn.classList.add("liked");
  likeBtn.disabled = true;
}

const likeSubmit = (isLike) => {
  num = likeSpan.innerHTML;
  if (!isLike) {
    num++;
    likeSpan.innerHTML = num;
    likeBtn.classList.add("liked");
    checkbox.checked = true;
    document.likePostData.submit();
    localStorage.setItem("mylike", true);
    likeBtn.title = "いいねしました。";
  } else {
    num--;
    likeSpan.innerHTML = num;
    likeBtn.classList.remove("liked");
    checkbox.checked = false;
    document.likePostData.submit();
    localStorage.removeItem("mylike");
    likeBtn.title = "この記事に「いいね!」する";
  }
};

likeBtn.addEventListener("click",() => {
    liked = likeBtn.classList.contains("liked");
    likeSubmit(liked);
  },
  {
    once: false,
    passive: true,
    capture: false,
  }
);

localStorageで「いいね」を押したかどうかを判定しています。
前回「いいね」してくれていたのであれば、即座にボタンにclass="liked"が付随するので表示が「いいね」済となります。
以前と同じブラウザでアクセスしないと意味がないのと、最近ではブラウザがあまり長い時間情報を保存してくれないようなので気休め程度に設定しておきます。

関数likeSubmitでclass="liked"を持っているかどうかを判定して、likeBtn.addEventListenerで現在の状態をApps Scriptに送っています。

Apps Scriptのdopost関数では、pageTitleとtitleURLとおもに、checkboxがchecked(チェックされているか)をtrue・falseで送られているので、falseの場合は、chackedが外れたということなので以前に「いいね」されていいます(スプレッドシートに記録がある)。なので、シート内の同じtitleURLの行を1行削除する関数toggleLikeを実行します。

function toggleLike(url){
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  const textFinder = sheet.createTextFinder(url);
  const cells  = textFinder.findAll();
  const row = cells[0].getRow();
  sheet.deleteRow(row);
}

「いいね」「いいね解除」を繰り返すと処理に時間が掛かり何も情報がない状態で登録されてしまうのか空白の行ができてしまいます。
そのままでも良いのですが、「いいね」数を集計する時にバグが発生してしまうので、値が登録されるタイミングで関数trashRowを実行して、空白行を削除します。

function trashRow(sheet){
  const lastRow = sheet.getLastRow();
  for(var i=1; i<=lastRow; i++){
    const nameCell = sheet.getRange(i,1); //
    if(nameCell.isBlank()){
    sheet.deleteRow(i);
    }
  }
}

これで、「いいね」ボタン側(HTML+CSS+JavaScript)とApps Script側の準備ができましたので、デプロイ (利用可能な状態にする一連の作業)します。

デプロイ

Apps Scriptの画面の右上にデプロイボタンがありますので、クリックして「新しいデプロイ」を選びます。
デプロイタイプはウェブアプリを選択します。

likebtn-006.jpg

ウェブアプリの情報を設定します。

  • 説明:何をするためのApps Scriptなのか記入します。
  • 次のユーザーとして実行:自分(Goolgeアカウント)にします。
  • アクセスできるユーザー:全員に変更します。
likebtn-007.jpg

アクセス承認ボタンが表示されますので、承認作業に入ります。
自分のアカウントを選びます。

likebtn-009.jpg

アクセスできるユーザーが全員となっているので「危険だよ」と警告する画面になります。下の「Advanced」をクリックします。

likebtn-010.jpg

Go to ウェブアプリ名(unsefe)と表示されるので、更にクリックして進めます。

likebtn-011.jpg

許可をクリックします。

likebtn-012.jpg

これで、ウェブアプリのURLが取得できるので、コピーして「いいね」ボタンの<form>action="Apps ScriptのWebアプリのURLを記入"の値を入れ替えます。

likebtn-013.jpg

スプレッドシート

これで「いいね」をクリックするとスプレッドシートに、タイムスタンプとWebページtitleとページURLが登録されます。
上手く動かない場合は、再度「新しいデプロイ」を行ってみてください。「新しいデプロイ」をするとウェブアプリのURLも変更するので、その都度action=""値を入れ替えてください。

likebtn-014.jpg

今回は、最終的にCodePenを使って実際に動きを確認しようと思いますので、titleやURLの値が入っています。

さて、次にどのWebページから「いいね」が押されたのかを判定し、数値を集計します。

シート2

スプレッドシートで、新たらしくシート2を作成します。
シート1には、「いいね」が押されたtitleとURLが登録されていきますので、同じURLを関数で集計し、シート2に表示します。

likebtn-015.jpg

シート2のA2セルにスプレッドシートの関数を記述します。

=unique('シート1'!C:C)

シート1のC列のユニーク表示をします。同じ値があっても1つしか表示されません。

likebtn-016.jpg

シート2のA3セルに、シート1のC列に同じURLがいくつあるか集計するスプレッドシート関数を記述します。

=ARRAYFORMULA(COUNTIF('シート1'!C:C,A2:INDIRECT("A" & COUNTA(A:A))))

ARRAYFORMULAは、選択したセル範囲と同じ数に自動的に値を追加してくれる関数です。今回は、いつ「いいね」されるかわかりませんので、新しい値が追加されたら自動的にB列に値が入ります。

どんな値かというと、COUNTIFでシート1のC列の値と、A列の値と同じ値の数をカウントします。INDIRECTは、文字列で指定したセル参照を返します。
"A" & COUNTA(A:A)で、A列のA2からCOUNTAで行数を把握し、値を追加していきます。
このCOUNTA関数が、空白行を集計しない仕様なため、Apps Scriptで空白行があったら、削除するようにしてあります。

これで、各ページの「いいね」を押された数が集計できました。

likebtn-017.jpg

この数値を、各ページの「いいね」ボタン横の数値に反映させます。

「いいね」の数を反映させる

再度、Apps Scriptにdoget関数を定義し、Ajaxでjsonデータを送信するようにします。

doget関数

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[1];
  const lastRow = sheet.getLastRow();
  const titleArray = sheet.getRange(2,1,lastRow-1,1).getValues().flat();
  const likeArray = sheet.getRange(2,2,lastRow-1,1).getValues().flat();
  const titleURL = e.parameter.titleURL;
  const postIndex = titleArray.indexOf(titleURL);
 
  let likeCount;
  if (postIndex >= 0) {
    likeCount = likeArray[postIndex]
  }else{
    likeCount = 0
  };
 
  const obj = {
    titleURL,
    likeCount,
  }
 
  JSONData = JSON.stringify(obj, null, 2);
  return ContentService.createTextOutput(JSONData).setMimeType(ContentService.MimeType.JSON);
}

シート2から、「いいね」の数を取得しています。titleURLの値がない場合は、0を返すようになっています。

「いいね」HTML

fetchでウェブアプリのURLに接続し、URLをパラメータとした値を取得しています。
帰ってくる値は、titleURLとそのページの「いいね」の数が返ってくるので、<span id="likeSpan"></span>に表示させています。

const titleURL = url.value;
const param = { titleURL };
const query = new URLSearchParams(param);
fetch(`ウェブアプリのURL/exec?${query}`)
  .then((response) => response.json())
  .then((likeJson) => {
    count = likeJson.likeCount;
    likeSpan.innerHTML = count;
  });

新たにデプロイ

Apps Scriptを修正したら「新たにデプロイ」をします。「新たにデプロイ」しないと反映されません。忘れないように、formとfetchの値を書き換えておきます。

これで、完成です。

CodePen

HTML側だけですが、CodePenにまとめました。
一応、動いているのですが、毎回パラメーターの値が違うので、送信されるtitleURLが変わって「いいね」の数が1以上にはなりません。
URLのみを取得するか、検索時に?以降を除外するか、対策が必要ですね。

See the Pen いいねボタン by tridentwebdesign (@tridentwebdesign) on CodePen.

このウェブDeBLOGに設置するだけなので、とりあえずはこのまま運用しようかと思います。

関連記事
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
https://tridentwebdesign.blog.fc2.com/tb.php/822-8f4ce03d
検索フォーム
Yahoo!基金

2024年1月1日、石川県能登地方を震源とする地震が発生し、甚大な被害をもたらしています。
謹んで令和6年能登半島地震のお見舞いを申し上げます。
支援のためのYahoo!基金のリンクです。

プロフィール

担当:Webデザイン学科

名古屋駅から歩いて6分、トライデントコンピュータ専門学校のWebデザイン学科を紹介します。

トライデントロゴ

質問などはLINEでどうぞ。

Instagram
Webデザイン学科実績
〈進級制作展〉
2023年度1年生「進級制作展」終了しました。
2022年度1年生「進級制作展」終了しました。
2021年度1年生「進級制作展」終了しました。
2020年度 1年生進級制作展(オンライン)終了しました。
2019年度 1年生進級制作展終了しました。
1年生進級展2018「線の群生」終了しました。
1年生進級展「WWW(Welcome to Web World)」を開催しました。
1年生進級展「お母さんの2度見展」を開催中です。
「うぇ~~~~~~~ぶ2016」終了しました。ご来場ありがとうございました!
「うぇ〜〜〜〜〜ぶ!!」終了。ご来場ありがとうございました!
〈コンテスト〉
信州未来アプリコンテスト0(ZERO)2023《U-29》DemoDay
令和4年度 起業家甲子園パートナー企業特別賞受賞!!
第6回「専門学校HTML5作品アワード」入選
信州未来アプリコンテスト0 (ZERO) 2022 《U-29》優秀賞&起業家甲子園出場権
第5回「専門学校HTML5作品アワード」入選
第4回専門学校HTML5作品アワード入賞2つ!
信州未来アプリコンテスト0 [ゼロ] 2020 NTTドコモ長野支店賞受賞!
第3回専門学校HTML5作品アワード入賞!
信州未来アプリコンテスト0 [ゼロ] 2019 KDDI賞受賞!
第5回 ソレコン☆ポスコン特別賞受賞
「第1回 専門学校 HTML5作品アワード」技術賞を受賞しました!
NCF2017でグランプリを受賞しました!
信州アプリコンテスト0 [ゼロ] KDDI賞受賞!
NCF2014(スマホアプリ開発テーマ2) 準グランプリ獲得!
最優秀賞!HTML5スマートアプリ&クリエイティブコンテスト
NCF2013グランプリ受賞!!!
〈Webサイト制作〉
ニシヤマナガヤ内「未完美術館」Webサイト公開
ミス・ユニバース・ジャパン岐阜大会公式Webサイトを作成しました。
建設業入職者増加プロジェクト発表会
Webサイト制作発表会2014
99eagle Webサイトリニューアル公開
99eagle Webサイト公開
「Bloom*Block」Webサイト公開
セントレア「日本の四季 キルト展」Webサイト公開
かっぱ商店街サイト制作
ココストア共同企画「アサココ!」公開
〈技能五輪全国大会〉
第56回技能五輪全国大会(ウェブデザイン職種)敢闘賞受賞!
第53回技能五輪全国大会(ウェブデザイン職種)その3
第52回技能五輪全国大会が開催されました。
銀メダル・銅メダル獲得【第51回技能五輪全国大会】
第49回技能五輪全国大会結果発表 敢闘賞受賞
第48回技能五輪全国大会結果発表(銀賞・敢闘賞受賞)
第47回技能五輪閉会式 & 結果発表
第46回技能五輪
〈若年者ものづくり競技大会〉
第16回若年者ものづくり競技大会 敢闘賞受賞!
第14回若年者ものづくり競技大会
第11回若年者ものづくり競技大会 2日目&結果
第9回若年者ものづくり競技大会2日目(競技日)
第8回若年者ものづくり競技大会2日目
第7回若年者ものづくり大会
第6回若年者ものづくり大会2日目
第5回若年者ものづくり大会
第4回若年者ものづくり競技大会閉会式
〈プレゼンテーション〉
WCAN 2016 Springに参加してきました。
WCAN 2015 Winterに参加しました。
建設業入職者増加プロジェクトの発表会に参加
WCAN 2015 Summerに参加してきました。
WCAN 2013 Winterに参加
WCAN(秋)に参加しました。
無事、発表が終わりました【WordFes Nagoya 2013】
WCAN 2013 Summerに参加してきました。
WCAN 2011 Winter LT&LOGO
学生がライトニングトークで話しました。
月別アーカイブ
タグリスト 改

トライデントコンピュータ専門学校Webデザイン学科業界研究WCAN技能五輪ウェブデザイン職種若年者ものづくり競技大会WebサイトECCコンピュータ専門学校名古屋ポートフォリオウェブデザイン学生ブログ映画2013JavaScriptWordPress卒展Webデザイン1年生進級展WinterWebサイト制作2009卒業制作展入学式2011CSS技能五輪全国大会進級制作展閉館日合同企業展オープンキャンパスアクアリングかっぱ商店街礒田優Wordpressa-blogNagoyaWebcms矢野りんライトニングトーク2014夏休み石黒雄介夏季閉館日アクセス解析就職活動モリサワ体験入学Autumn若年者ものづくり大会ウェブデザイン技能競技大会Web制作会社アンティー・ファクトリーCGイラスト学科面白法人カヤックSummer卒業制作卒業研究制作展冬休みテンプレート作成フォトアルバムホームページ・ビルダー瀬川大勝HCDプレゼンテーション大阪2010第48回技能五輪全国大会2012inminiAdobeココストア東京電子専門学校Japan東京研修jQueryFlashHTML5ウェブデザイン技能競技会HappyWebアプリ学生インタビューNew2023名古屋駅神戸電子専門学校佐藤歩Year杉本拓也あいちカレーラーメンコンテストGIOIIJhtml52015田中睦翔上村水月ウェブアクセシビリティ99eagleBananaAd企業訪問SpringCOMMUNICATIONプロジェクトCentOS専門学校NEXTラーメンCSS3マール学生ウェブデザイン技能検定水野裕太ブログパーツ情報デザインフォーラムGoogle愛知県人間中心設計情報デザインWebワークショップセントレア鈴木優太2018グリッドレイアウトdisplay:gridGridLayoutエイチーム新年gifアニメ20242020あけましておめでとう北濱大輔株式会社スタメンYahoo!JapanWebデザインギャラリー制作合宿UXWebクリエイター能力認定試験林田実樹トライデント祭り水野怜美サイバーエージェント成田篤紀forPluginビジュアルエディタ会社訪問堀尾真衣メ~テレ卒業式ナゴヤドーム中日ドラゴンズゴールデンウィークWEBサイト制作者のためのHCDの理解in名古屋知多みるく戸田芳裕AnalyticsCSSNite産学協同レイアウト作品集名商連BoxWordFesたにぐちまことAdvent5T(ファイヴティー)Like岩手県ポートフォリオサイト阿部淳也コミュニケーションデザインワークショップ敢闘賞FICC塚本碧真鍋大度名古屋市科学館空気人形アサココ!DTPWORLD情報デザイン基礎ディプロスWordCamp豊田市美術館導入授業WebリテラシーStore鷹野雅弘2008Calendar茂森仙直企業課題Appleグループ制作F-site名古屋開府400年祭カメラワークショップウェブDeBLOG写真トライデント合同企業展イラストマップ笈瀬本通りモンキーワークス結果発表jbstyleMarkupCMSカリキュラムiPhoneSEOトライデント静岡2017出張講座ES2015久保怜也アプリコンテストイークリエイト信州アプリコンテスト[ゼロ]ES6ECMAScript沖縄RunstantWebデザイナードラマ株式会社LIG学習進級展桝田草一日本総合ビジネス専門学校信州未来アプリコンテスト0(ZERO)Photoshop学生ポートフォリオSmartHR岐阜協立大学和み清風情報工科学院2021中島優美松井友奈オンライン授業松本渚後期集中授業2022鈴木英心田口和磨サーティファイZoomtextarea要素input要素legend要素option要素output要素HTMLselect要素fieldset要素label要素初期設定AWARDスマートフォンdisplayForumform要素たこ焼き長屋めぐみ愛知県選手団飯田淳介フロントエンドエンジニアマークアップエンジニア幕張メッセNTTドコモ東海UXデザイン謹賀新年熊谷佳紀particleアップルップルうぇーぶcanvas1年生作品展まぼろしスマホアプリインターンシップNHNStation第7回若年者ものづくり競技大会Future尾花大輔Bloom*BlockdocomoBloosumTeamイマジンカップロゴマーク東京ゲームショウ2012Ohanaゲーム大賞アマチュア部門メールマガジン静岡県2011年度迎春ツインメッセ静岡ドコモFacebookたこ焼きパーティWeb制作合宿Muse画像をチェックボタンにするみんなのICT佐藤ねじ東京ゲームショウ木下健太郎就職東京張山大祐JQueryFacebookページベースキャンプ名古屋SHOWGAMESVGIllustrator第50回結果長野TOKYO円JOY!map卒業制作・研究発表会2011ぬいぐるみのラパンKtaistyleCustomSmilies英国王のスピーチUntitled!!!!!!!!ablogcmsトライデントカレッジ絵文字Three.jsGAINAXSUBARU放課後のプレアデスキルターズフェスティバル2011中部国際空港日本の四季卒業・修了制作展愛知県立芸術大学キルト展DTPの勉強部屋伊達千代マーサ・グレアム5月11日GoogleロゴGATEライアン・ウッドワードプラネタリウム神戸国際展示場鈴木DRAGONドラゴンゲート3JAPANWORLDCUPMagnum北岡弘至バルサマンプロジェクションマッピング愛知淑徳大学みつけもの恵那市岩村神戸google丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店青空学区名古屋市営地下鉄柏木祥太スパルタキャンプ大門坂那智の大滝名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山特別授業AOdatalist要素keygen要素optgroup要素type属性button要素第52回技能五輪全国大会笈瀬本通商店街麺の匠オリエンタル紅茶専門店Liyn-anアイテムカンパニー山田拓生加藤ひとみ西岡克真Animation青山敬司結団式ネイルサロンマウア授業アイチータ石原愛実ランチ麺屋ココイチフジ家55さかなや晴れやか麺やOKカレーラーメン美術大学芸術大学高橋雅人嵐が如く第51回技能五輪全国大会byinspiredRhizomatiks田代豊PerfumePARTYWebデザイン演習あいちトリエンナーレ2013そこにいない。展卒業展NCF2013parseFloat()parseInt()DesignerGWD備忘録栗山聡一中村健太道家陽介concrete5F81教室トライデント合同企業説明会モテ声ボーダーlist-itemlist-style-typeNTTドコモ東海支社HTML5スマートアプリ&クリエイティブコンテストKDDI10日でおぼえるLinuxサーバー入門教室最優秀賞ジョルテプレゼン大富豪スコアシート#infoedu教育勉強会ロゴ公募FITC小野裕子コピーライティングデュエル・マスターズ長谷川恭久スーパーエレメンツ山崎デザイン事務所CREAMごはんとFlashFlash-GameswonderflKyotodotFesゆるキャラ閉会式マークアップ演習マクロマリオネット映画のオープニングイラストコンテストヨウイチ新横浜ラーメン博物館横浜中華街箱根合宿森川眞行慶華飯店NIKEThereThenAnd会社見学鎌倉浅野智おかだよういちペルソナ/シナリオ法情報デザイン教育勉強会ペルソナ&シナリオ法クリ博就職フェスタ日本電子専門学校横浜デジタルアーツ専門学校3校合同発表会HCDプロセスブランディング今井佳子アイディグラフィックス学生参加CMS特集グラフィックデザインガンダムMozorama後期入賞ソバットシアターコマ撮りアニメ旭食品サンプル製作所食品サンプルActionScriptヱヴァンゲリヲン新劇場版:破学科富岡聡電信柱エレミの恋ウサビッチカナバングラフィックスアニメーションescalator世界のCMフェスティバルITホワイトボックスPHP勉強会親孝行Yahoo!JAPANインターネットクリエイティブアワードAutuminカラーストリートビュー東京ゲームショウ2009人喰いの大鷲トリコ第4回アックゼロヨン・アワードCG・イラストコンテストモーション演習animationLPOギレン総帥是枝裕和監督ナゴヤデザインウィーク2009UNIQLOCKWasSalsa商店サイト制作プチ・フレーズ三蔵みの治商店UltimateGA中級編名駅経済新聞名チャリ愛知商業高校Twitterグラフィクデザインチタハン10WEBサイト制作者のためのHCD(人間中心設計)の理解AndrioidITCIRCUS名古屋グランパス笈瀬本通ポスターデザイン・コンペディションCODE名古屋クリエイターフットサル名古屋サイト改善研究会増田悟ウェブリテラシー協会Slimbox2LoadLazyJISXFLAVER3.0FLV8341-3:2010大西健太田中稚妃呂ブラザー工業株式会社中部国際空港株式会社CODEポスターデザイン・コンペティション小林信次株式会社アクアリングカメラワーク横浜デジタルアーツGoogleAnalytics石井研二柴乃櫂人広島弁求人新世界道頓堀ナゴヤ大沢たかおネスカフェゴールドブレンドプロ野球ポートピア名古屋フナ犬武将都市名古屋おもてなし武将隊浜松IA2010キックオフセミナー夢プロジェクト2009・成果報告会ウェブリテラシー協会第一回セミナー餃子福みつ武豊アニメーションフェスティバルTAFFWCAN46知多半島スタジオジブリ・レイアウト展タロヲ商店街金シャチ商店街名古屋メディアボンド細川太郎1→10designiPhone4シナリオペルソナアクセシビリティサーバーWEBサイト制作者のためのHCDの理解技能五輪予選unoplus松坂屋美術館プロトコル分析伊藤頼子IAYORKE.ビジュアルデベロップメント名古屋市中村区ミス・ユニバース・ジャパン岐阜大会パラサイト2020アカデミー賞企業賞第3回専門学校HTML5作品アワードemrem福田将也信州未来アプリコンテストvhvw株式会社COTSOriginalTshirt.stMILKメンバーズ三瓶池田泰延ICS進級制作フロントエンドマイクロインタラクション小林隼大小林健人StudentReDesigner第4回専門学校HTML5作品アワード2021年グッドパッチTypeScript原田ゆいノマドランド2021アカデミー賞令和3年神谷友理恵中村享介海老江優太Frontend株式会社メイクリーニシヤマナガヤ未完美術館松本健太業界研究授業名古屋市名東区2019年令和2年新入生オリエンテーション企業見学株式会社MTG2020新卒わたし、定時に帰ります。TBSSTUDIOLIGCBC線の群生Figma平成31年メーカー・ブランドコーヒー用品前川元成あけおめ株式会社サイバーエージェントツールUIデザイン牧野史門髙橋茜音markereat足立丈也、平子卓哉、増田隼也信州アプリコンテストゼロフェンシングエペclasses株式会社LIGHTzスポーツアナリティクスライフスタイル仙直髙橋株式会社アンティー・ファクトリーPhotoshopCS6祐司茜音2019茂森コンテストソレコン☆ポスコン穂刈謙亮イロコトReDesignerforStudent伊藤愛スタメンサードスコープarray.map()newオープンカンパニー鶴田信博株式会社マベリカMapHOPTERTECHSCHOOLザ・ホエール桝田さん辻さん後藤さん働くの学び舎トライデントコンピュータ専門学校Webデザイン学科卒24年卒エブリシング・エブリウェア・オール・アット・ワンス2023アカデミー賞Webサイト起業家甲子園キャリア教育Element.append(),茂吉さん加藤さんGASスプレッドシート進級制作展卒業研究制作展トライデントコンピュータ専25年卒LINEヤフー名古屋文理大学2024アカデミー賞WebサイトScriptAppsElement.insertAdjacentHTML(),Element.before(),Element.after(),Element.prepend(),ブログテーマエスケイワードいいねボタンDemoDay前野拓馬福田さんトライデントコンピュータ専門学校第6回専門学校HTML523年卒@include@mixin印刷CSSHOPTERマネーフォワードSCHOOLTECH@import@use特別企画『謎解き~7つの学科の謎を解け~』山本智香子杉山知央エンタメcontents後藤拓也Sass第5回専門学校HTML5作品アワード2022年2022アカデミー賞Webサイトコーダ2023年令和5年卒業制作展卒展進級制作展名古屋2022トライデントコンピュータ専門学校合同企業展就職活動新年あけましておめでとうGrowGroupY.OM.S小林明日香NICT賞優秀賞夏休み夏季閉館日2022トライデントコンピュータ専門学校Webデザイン学科フドライブ・マイ・カーあいのうた株式会社アビリブ風呂谷さんコピーライター森健安藤さんNextDoor斉藤洸貴合宿合同制作合同制作合宿専門士懇親会Web制作のおしごと原一浩坂本邦夫WebプログラマーWebディレクター学位出席率仕事UIバイドゥ平野健太郎ワイヤーフレームうぇ~~~~~~~ぶ職業実践専門課程レスポンシブWebデザインウェブアートデザイナー2016津田直明jsdo.itCodeplyPlunkerJSFiddle涼麺駅麺通りDay:IndependenceクイズJSBinCodePenIA/UXプラクティス平野秀幸坂本貴史制作実績カークスヴィル沼田啓助プログラムクイズAO入試河地芳明ポートフォリオアイデア帳採用担当者の心に響く八木智章竹中民男夏麺フェア木村哲朗ScrollmagicScrollMagicアクセシビリティからはじめる、WebサイトのUXデザイWebアクセシビリティVelocity.js森田霞HighlighterスマートフォンサイトUI図鑑CSS3&jQueryで作る名古屋駅麺通りNCF2014WF1でBLOG新入生SyntaxCrayon2015年度建設経営者倶楽部ワクワク建設タウンKaizenアクティビティシナリオ源賢司Dmm.comPlatformグロースハック高校14グロースハッカー岡田陽一FlexibleBox東京コスモクリスマス熊﨑彩第53回3DCG松田洋樹Flexbox味仙CGスペシャリストResurgenceプラネタリアンWWW(Welcome友章堀川志維toWorld)期末テストWebデザインスペシャルデー北川パーヤン安藤NCF2017ofTableTOCAWARDSContents安藤志維フォントおじさん関口浩之堀川友章脆弱性なんと読む?韓国picture沖縄県第56回GOsourcesrcsetcymaEC事業第56回技能五輪全国大会OculusVRカルタ藤井英一JIHYEHEOホ・ジヘ冨田伴成新城高校東京ゲームショウ2018出前授業青山高校出身高校D3.jsInstagramインスタグラム醐りょう料理芸大HTMLCollectionNodeList美大いな世驛麺通りジムナストコロン日清食品グループタカガールサイト水曜日のカンパネラ学生作品集Monaca再進学学園祭情報系appendChild()Webプログラミング初級講座梅澤朝樹株式会社エイチーム山川綾那鈴木雄太衣台高校尾鷲高校スクラップブック夏休みの課題ノートPC貸与スタジオディテイルズ服部友厚v4.0.1SyntaxHighlighterお母さんの二度見展マイクロソフトWCAN2017SpringProxy佐藤洋介ターミナル学校新年のご挨拶

メールフォーム

名前:
メールアドレス:
件名:
本文:

トライデントコンピュータ専門学校
教務課のびのび日記
オフィス川口
Pagetop