ウェブ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関数

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

2023.09.30 [土] JavaScriptで要素を挿入する。

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

後期集中授業が終わり、通常授業が始まります。
1年生はJavaScriptに触れる機会も増えてくるということで、色々とJavaScriptの授業資料を棚おろししています。
永らく要素の挿入をNode.appendChild()でやっていたのですが、挿入する要素をノードで扱わなくてはならず、NodeList と HTMLCollection と Node.appendChild() とのように、初学者には頻繁にエラーと出くわすことになります。
実は、append, prepend, before, after, remove, replaceWith のようなモダンなメソッドがあるのですがJavaScriptの本などでは、あまり紹介されていませんので、調べてみました。

insertElmenetThumbnail.jpg

Element.append()メソッド

Element.append()メソッドは、一連のNodeオブジェクトまたは文字列をElementの最後の子の後に挿入します。文字列は、等価なText ノードとして挿入されます。

Node.appendChild()との違いは次の通りです。

  • Element.append()は文字列も追加することができますが、Node.appendChild()はNode オブジェクトのみを受け付けます。
  • Element.append()には返値がありませんが、Node.appendChild()は追加された Node オブジェクトを返します。
  • Element.append()は複数のノードや文字列を追加することができますが、Node.appendChild()はノードを1つだけしか追加することができせん。
const div_elm = document.querySelector('div');
const appendText = document.createElement('p');
appendText.innerText = 'appendで挿入';

div_elm.append(appendText,"<p>そのままテキスト_append</p>");

結果は、こうなりました。

prepend()メソッド, after()メソッド, before()メソッド,

Element.prepend()Element.after()Element.before()はそれぞれ挿入される場所が違うだけで使い方も同じです。

2023.08.10 [木] map()?new Map?

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

夏休みのような長期休暇は、普段なかなか調べられないことや学習などに時間を費やしたいところです。
最近では、JavaScriptのフレームワークを触わることも増え、mapなんちゃらと、よく見かけます。なんか新しいループの便利機能ぐらいに思ってました。

そうしたら、new Mapなんてのも見かけるようになって「あぁ、これは区別がつかなくなりそう」ということで、調べてみました。

mapMap003.png

Array.map()

array.map()は、JavaScriptの配列の要素を変換するための便利なメソッドの一つです。
このメソッドは元の配列の要素を1つずつ順番に取り出し、指定されたコールバック関数を適用して新しい要素を生成し、それらを含む新しい配列を返します。

参考:Array.prototype.map() - JavaScript | MDN

// 元の配列
const numbers = [1, 2, 3, 4, 5];

// 各要素を2倍に変換する新しい配列を生成
const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers);
// 出力: [2, 4, 6, 8, 10]

map()メソッドは、配列イテレーターメソッドで、配列をループして、配列の要素を順番に指定した関数に渡す動きをします。イテレータ(Iterator)とはデータ構造の各要素に対して繰り返し処理によって要素を返す仕組みです。

3つの引数

第1引数として関数を受け取ります。この関数は、要素ごとに呼び出され、実行されるたびに、返された値が新しい配列に追加されます。
配列イテレーターメソッドの多くは、この関数に3つの引数が渡されます。

  • 第1引数:配列の値
  • 第2引数:配列要素のインデックス
  • 第3引数:配列自身
const doubledNumbers = numbers.map((num,index,array) =>{ {
  return num * 2 + `、indexは${index}`+ `、配列${array}`
});
//出力:["2、indexは0、配列1,2,3,4,5", "4、indexは1、配列1,2,3,4,5", "6、indexは2、配列1,2,3,4,5", "8、indexは3、配列1,2,3,4,5", "10、indexは4、配列1,2,3,4,5"]

map()メソッドの第2引数

第1引数には、関数を受け取りますが、第2引数を指定した場合、この第2引数がthisの対象となるキーワードとなります。

const city = {
  tokyo: "東京",
  nagoya: "名古屋",
  osaka: "大阪"
};

const tomei =["tokyo","nagoya"]

const doubledNumbers = tomei.map(function(name) {
  return this[name];
}, city); 
//オブジェクトcityがthisの対象、tomei配列をキーとして取得
//出力: ["東京", "名古屋"]

じつは、ES5の頃からあるメソッドで他にも便利な配列メソッドと一緒に紹介されていることが多いので、forEach()メソッド、filter()メソッド、reduce()メソッドも解説していきます。

array.forEach()

array.forEach()メソッドは、配列の各要素を順番にコールバック関数に渡し、各要素に対する操作を行います。要素の数だけコールバック関数が実行されます。

参考:Array.prototype.forEach() - JavaScript | MDN

2022.03.05 [土] ポートフォリオサイトを印刷用CSSでプリントする。

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

2月が短いというのありますが、あっという間に3月ですね。
だんだんと春めいた陽気になってきました。

さて、3月になり、名目上の就職活動解禁となりました。
来年(23年)卒の学生たちは、説明会参加やエントリーなどで慌ただしく活動しているか思います。
その就職活動で必要なものが、ポートフォリオです。Webデザイン学科の学生が志望するデザイナー職・エンジニア職には、採用試験の前や面接時に作品集「ポートフォリオ」を求められることが多くあります。

mediatype_print-002.png

Webデザイン学科では、Webサイト制作を学んでいるため、その技術や成果を伝えるためにWebサイトでポートフォリオを制作していますが、まれに紙のポートフォリオが必要になる場合があります。

印刷用CSSで紙用のレイアウトを設定する。

ポートフォリオを簡易的に作るサービスも増えてきていますが、いちから制作すると、やはり時間がかかります。さらに、IllustratorやInDesignで紙のポートフォリオを制作するとなると膨大な時間を費やすことになります。
就職活動期間とはいえ、学校の授業や課題などもありますので、そこまで時間をかけることはできません。

そこで今回は印刷用のスタイルシートを設定することで、Webポートフォリオを印刷すると紙用のレイアウトでプリントさせる方法について書いていこうと思います。

以前は、Webサイトを印刷する機会も多かったのですが、スマートフォンが普及したおかげでずいぶんと少なくなってきました。さらにブラウザの印刷メニューでも背景非表示など最適化が可能になっていますので、内容を見るためのプリントなら、それほど不便なく印刷できます。
そのためか、印刷用のCSSが読み込まれているWebサイトも少なくなってきました。

印刷用CSSをWebサイトに適用させる為には、PCとスマートフォンの見た目を切り替えるメディアクエリで使う、メディアタイプが重要になります。

メディアタイプ

メディアタイプには、機器の分類値を記述しています。
また、メディアタイプは省略可能です。その場合、暗黙的に値はallとなります。
主なメディアタイプの分類は、

  • all:すべての機器に適合します。
  • print:ページのある資料や、画面に印刷プレビューモードで表示されている文書に適合します。
  • screen:主にPCやスマホなどスクリーン向けのものです。
  • speech:音声合成向けのものです。

CSS2.1およびMedia Queries3では、他にもテレビやプロジェクターなどのメディアタイプ(tty、tv、projection、handheld、braille、embossed、aural)が定義されていましたが、これらはMedia Queries4で非推奨となっています。

mediatype_print.jpg

印刷用CSSを設定する方法

印刷用のCSSを設定する方法は4つほどあります。

① link要素にmedia属性で読み込む

1つめは、外部CSSファイルとして、link要素のmedia属性の値をメディアタイプの分類値にします。
分類値には複数の値を設定することもできます。






2022.02.12 [土] @useの使い方がわからない…ので

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

春休みになりました。長期休暇に、普段調検証できないことを、いろいろと調べて勉強していきたいですね。
今回は、ずいぶんと一般的になったSassの@useの使い方について調べてみました。

Sassとは

Sass(Syntactically Awesome StyleSheet)とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。
直訳すると「文法的に素晴らしいスタイルシート」で、Sassのページには「世界で最も成熟した、安定した、強力なプログレードのCSS拡張言語です。」と記載されています。
以前は、LessStylusなど他のCSSメタ言語もよく聞かれたのですが、最近ではSassの話題ばかりになっています。
ちなみに、CSSメタ言語とは、CSSの生産性向上の為に拡張された技術のことです。

sass_use-001.jpg

Sassを導入するメリットは、

  • 入れ子の使用が可能
  • 変数を利用できる
  • 四則演算が可能
  • 関数を使用できる
  • ミックスイン・継承による効率化
  • ファイルを分割して管理できる

が、上げられます。

私も、ファイルを部品ごとに分割して管理したり、reset CSSを別ファイルで読み込む場合など便利に利用しています。
CSSの@importと違って、Sassの@importはビルドすると合体されるため、HTTPリクエストの数が増えることがなく、読み込みスピードに大きな影響がありません。

また、進化の過程でSassの種類も変化してきました。主な種類は、

  1. Ruby Sass:Ruby製。2019年サポート終了。
  2. LibSass:C++製。現在、主流。
  3. Dart Sass:Dart製。公式推奨。

と、移ってきました。
今はLibSassが主流のようですが、公式で推奨されているため、だんだんとDart Sassが使われるようになってきています。

そんな便利に使ってきた@importですが、今後数年間で、段階的に廃止され、最終的にはSassから完全に削除されるようです。「代わりに@useルールを優先してください」とのことです。
※遅くても、2022年10月1日には廃止されるみたいです。

@useを使ってみる

単純に@importを@useに変えればいいんでしょ、と思って使ったら躓きました。。。
ということで、早急に@importの代わりに@useの使い方を理解しないといけないわけなので、調べてまとめてみました。

Sassのドキュメントには、

このルール(@use)は、他の Sass スタイルシートからMixin、関数、変数を読み込み、複数のスタイルシートの CSS を一緒に結合するものです。@useによって読み込まれるスタイルシートは「モジュール」と呼ばれます。

と書かれています。

2021.09.30 [木] display:contentsを使ってみたい。

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

トライデントコンピュータ専門学校では、夏休みも終わり、各学科ごとに集中授業で作品制作、資格対策などが行われています。そして来週からはいよいよ後期通常授業が始まります。
学園祭などの学校イベントはもちろん、就職活動も始まる後期ですので、充実した学生生活を送ってもらいたいです。

さて、久しぶりにCSSについてわからないことがあったので、調べてみました。
先日、コリスの「モダンCSSによる絶対配置(position: absolute;)の削減 」という記事内にdisplay:contents;の便利な使い方が紹介されていました。

displayContent_001.jpg

displayプロパティに関しては、過去に、flexについて「そろそろFlexboxを勉強し始めてもいいんじゃないだろうか - ウェブDeBLOG」だったり、gridについては「 CSS Grid Layoutの時代がやってくる。」に記述しましたが、以前よりも、頻繁に使っている気がします。
とうことで、今回はdisplay:contents;です。

display:contents

いつもどおり、W3Cの仕様書を見てみると、

contents
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).
要素自体はボックスを生成しませんが、その子や疑似要素は通常通りボックスやテキストランを生成します。ボックスの生成とレイアウトの目的のためには、要素は要素ツリー内でそのコンテンツ(ソース・ドキュメントの子要素と、 ::before と ::after 疑似要素のようなその疑似要素の両方を含み、これらは通常通り子要素の前後に生成される)によって置き換えられたかのように扱われなければならない。

あいかわらず、よくわかりませんので実際にコードを書いて確認したいと思います

CSSのボックスモデル

まずは、要素自体のボックスを理解するために、CSSのボックスモデルを復習したいと思います。
HTMLの要素はどの要素も、下図のような「ボックス」と呼ばれる四角形の領域を生成します。

boxmodel21.jpg

CSSのdisplayプロパティの値によって、ボックスと子要素の描画を設定することができます。

displayプロパティ

displayプロパティには、blockinlineなどの表示タイプを設定するものや、flexgridなど、要素内部の表示タイプを設定するものなど、種類が分かれています。
その中で要素がボックスを生成するかどうかを設定する値が、nonecontentsとなります。

検索フォーム
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卒業制作展入学式技能五輪全国大会CSS2011進級制作展閉館日合同企業展オープンキャンパスアクアリングかっぱ商店街礒田優cmsa-blogWordpress矢野りんライトニングトークWebNagoyaアクセス解析2014夏休み石黒雄介夏季閉館日モリサワ就職活動Summerウェブデザイン技能競技大会若年者ものづくり大会Web制作会社AutumnCGイラスト学科面白法人カヤック体験入学テンプレート作成卒業制作アンティー・ファクトリーホームページ・ビルダーフォトアルバム冬休み卒業研究制作展瀬川大勝大阪HCDin2012東京研修第48回技能五輪全国大会2010miniJapanAdobeココストア名古屋駅FlashHTML5jQueryウェブデザイン技能競技会プレゼンテーションNewHappyWebアプリYear東京電子専門学校あいちカレーラーメンコンテスト2023学生インタビュー神戸電子専門学校佐藤歩IIJ田中睦翔GIOhtml52015杉本拓也上村水月99eagle企業訪問ウェブアクセシビリティSpringプロジェクトNEXTセントレア専門学校COMMUNICATIONラーメンBananaAdマールCSS3ウェブデザイン技能検定ブログパーツCentOS学生情報デザインフォーラム人間中心設計情報デザインWebワークショップGoogle愛知県グリッドレイアウト2018エイチーム鈴木優太display:gridGridLayout新年あけましておめでとう水野裕太2024学生ポートフォリオ2020北濱大輔株式会社スタメンWebデザインギャラリーYahoo!JapanUX制作合宿gifアニメWebクリエイター能力認定試験林田実樹水野怜美トライデント祭りサイバーエージェント成田篤紀Pluginforビジュアルエディタメ~テレ堀尾真衣卒業式会社訪問ナゴヤドーム中日ドラゴンズゴールデンウィークWEBサイト制作者のためのHCDの理解in名古屋知多みるく戸田芳裕AnalyticsCSSNite産学協同作品集名商連レイアウトBoxWordFesたにぐちまことAdvent5T(ファイヴティー)Like岩手県ポートフォリオサイト阿部淳也コミュニケーションデザインワークショップ敢闘賞FICC塚本碧真鍋大度名古屋市科学館SEOアサココ!DTPWORLD情報デザイン基礎ディプロスWordCamp豊田市美術館導入授業WebリテラシーStore鷹野雅弘2008Calendar茂森仙直企業課題Appleグループ制作F-site名古屋開府400年祭カメラワークショップウェブDeBLOG写真トライデント合同企業展イラストマップ笈瀬本通りモンキーワークス結果発表jbstyleMarkupCMSカリキュラムiPhone空気人形トライデント静岡出張講座ES2015ES62017久保怜也信州アプリコンテスト[ゼロ]アプリコンテストECMAScript学習RunstantWebデザイナーサーティファイ沖縄ドラマ進級展株式会社LIGイークリエイト桝田草一信州未来アプリコンテスト0(ZERO)Photoshop2021SmartHR岐阜協立大学和み清風情報工科学院中島優美鈴木英心オンライン授業Zoom日本総合ビジネス専門学校松井友奈後期集中授業田口和磨2022初期設定松本渚input要素愛知県選手団fieldset要素textarea要素option要素select要素output要素label要素form要素AWARDスマートフォンUXデザインdisplayたこ焼きForumHTMLlegend要素フロントエンドエンジニアアップルップルparticle飯田淳介長屋めぐみ謹賀新年熊谷佳紀幕張メッセcanvasマークアップエンジニアスマホアプリNTTドコモ東海うぇーぶ1年生作品展まぼろしインターンシップStation第7回若年者ものづくり競技大会NHNFutureイマジンカップ尾花大輔BloosumBloom*BlockTeamdocomoロゴマーク東京ゲームショウ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北岡弘至バルサマンプロジェクションマッピング愛知淑徳大学みつけもの恵那市岩村神戸GWD丸高アロチ本家和歌山中華そば熊野三山丸田屋岩出本店青空学区名古屋市営地下鉄柏木祥太スパルタキャンプ大門坂那智の大滝名古屋マークアップ勉強会tableテーブル宇野剛志マカベン熊野古道本州最南端串本八鬼山特別授業AOdatalist要素keygen要素optgroup要素type属性button要素第52回技能五輪全国大会笈瀬本通商店街麺の匠オリエンタル紅茶専門店Liyn-anアイテムカンパニー山田拓生加藤ひとみ西岡克真Animation青山敬司結団式ネイルサロンマウア授業アイチータ石原愛実ランチ麺屋ココイチフジ家55さかなや晴れやか麺やOKカレーラーメン美術大学芸術大学高橋雅人嵐が如く第51回技能五輪全国大会byinspiredRhizomatiks田代豊PerfumePARTYWebデザイン演習あいちトリエンナーレ2013そこにいない。展卒業展NCF2013parseFloat()parseInt()Designergoogle備忘録栗山聡一中村健太道家陽介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