service-tag コラム|トライベック
HUMAN INSIGHT CX
リサーチソリューション
コンサルティング
クリエイティブ・UX
制作・オペレーション
テクノロジー
データドリブン
マーケティング
サービスについて
オピニオン
トライベック広報
会社概要
社長メッセージ
経営理念
社名・ロゴの由来
トライベック・ニューノーマル
役員紹介
地図・アクセス

COLUMN

コラム

トライベック社員が多様なテーマで情報を発信するコラムです。また、社外からではなかなか見えにくい社内のさまざまなトピックもお届けします。

会社紹介・その他
2020年11月24日

内定者WELCOME CEREMONY2020

2020年11月16日にオンラインにて「内定者WELCOME CEREMONY(内定式)」を開催しました。 例年の内定式は赤坂オフィスに内定者をお招きして、開催をしていました。今年はコロナウイルスの影響で赤坂オフィスでの開催を断念せざるを得ない状況でした。 最近、新卒採用は“一括採用”から“通年採用”にシフトチェンジを図る企業が出始め、併せて内定式を開催しない企業も少しずつ出始めてきています。しかし、内定式は内定者にとって、一生に一度しかないイベントです。その貴重な機会をぜひ経験してほしいと私自身思い、どうすれば満足のいくイベントが開催できるか考えていました。 当社は新卒採用をはじめて7年目となり、内定式は社員にとって、楽しみにしているイベントのひとつです。また前述の通り内定者にとって内定式は一生で一度しかないイベントです。そのため内定者、社員どちらにとっても記憶に残るイベントにしたいと思い、今年は“全社員参加型のオンラインイベント”を企画しました。 内定者WELCOME CEREMONY 「内定者WELCOME CEREMONY」は後藤社長からのメッセージで開幕し、神妙な面持ちで内定者は後藤社長のメッセージを聞いていました。 つづいて、内定者ひとりひとりから自己紹介をしてもらいました。自己紹介は当社に決めた理由など発表してもらい、その発表にはひとりひとりの個性が出ていて、それぞれの良さを見ることが出来ました。 当社に決めた理由で多かったのが、 ・コーポレートスローガン「ひとにやさしく、つなぐデジタルを」に強く共感 ・社員のひとのよさ でした。その中の“ひとのよさ”は今回のイベントで感じてもらえたのではと思います。それは、ひとりひとり自己紹介が終わった後、チャットで「おめでとう!」がたくさん寄せられ、連続で寄せられるチャットは圧巻の光景でした! きっと内定者の皆様も喜んでくれたのではと思います。 WELCOME CEREMONY風景 内定者から寄せられた感想は、 4月に向けて不安な点もありましたが、トライベックの皆さんのお顔を見ることができ、不安が和らぎました! また後藤社長のお話を通じて、社会人になっていくという自覚も増し、身が引き締まりました。 本日はとても楽しく貴重なお時間をいただき、ありがとうございました! 本日はお忙しい中、内定式を開催していただきましてありがとうございました!オフラインでお会いできます事心より楽しみにしています。今後もよろしくお願い致します。 お忙しい中、このような機会を作っていただき、誠にありがとうございました。 私が想像していた以上の社員の方々に参加していただき、少し緊張しましたが、とても暖かく歓迎していただいていると感じました。 オンラインではありますが、社員の方々のコメントや他の内定者の雰囲気を見て、早くお会いしたいという気持ちが込み上げてきました。 自己紹介では緊張しましたが、温かく聞いて下さり嬉しかったです。 本日はお忙しい中、「内定者WELCOME CEREMONY」を開催していただき、誠にありがとうございました。後藤社長のお話の中にあったように、今の時間を大切にしながら、来年の入社に向けて勉強に励み準備をしていきたいと強く思いました。 今後ともご指導ご鞭撻の程よろしくお願い申し上げます。 想像以上にたくさんの社員の方が参加されていて驚きましたが、お祝いのメッセージなど、とても嬉しかったです。また、同期の顔もみることができて良かったです。イベントを開催して頂き、本当にありがとうございました。 と、喜びや驚き、感謝の声を聞けて、開催して良かったと思います。また、内定者の記憶に残るイベントに出来たのではと感じています。 総括として、内定式をオンラインで開催することは初めての試みでしたが、デジタルでひとに思いを届けられることは可能であると感じました。それは、当社で大切にしている「ひとの気持ちに寄り添う」ことが思いを届けるために一番大切だと思いました。 来春からいっしょに働けることを心から楽しみにしております。...

会社紹介・その他
2020年11月10日

全国20万の学生が選ぶリーダーズアワード2021年に選出。激動の今だからこそ伝えたい。“ひと”が主役のデジタル社会で輝ける人材へ。

リーダーズアワードとは、学生が憧れる経営者を決めるアワードで50名の経営者が選出されています。私もそのうちの1人に選んでいただきました。そのリーダーズアワードについてこのように紹介されていますので引用します。 人生を大きく左右する就職活動。 何を目指し、どんな大人になりたいのか。 大きな岐路に立つあなたに、一つのヒントになるべく、50人の経営者の言葉を集めました。 目まぐるしく変化していく世の中においてそれぞれの知識や経験をもとに素早い判断で会社を経営し、日本を牽引している人のそれぞれの熱い思いを感じてください。 そして、そこから「新しい気づき」「将来の目標」「なりたい大人」に繋がる〝あこがれる経営者″を決定するアワードを開催します。 このアワードを通じて得た人生のヒントをパワーに変え、是非、これからのあなたの原動力にしてください。 本アワードは冊子として、全国の大学に配布され20万人の学生が見ることになります。さらに冊子の表紙には、50名の経営者の中から選出された14名が代表で掲載されており、私もご一緒させていただきました。 今回このような貴重な機会を得て、未来ある学生に向けたメッセージをということで取材していただいたわけですが、その際に感じたことについてお話ししたいと思います。 世界はウィズコロナの真っ只中にあります。これから冬を迎えようとする中で、欧州では爆発的な第3波が来ており、日本でも増加傾向にある状況です。このコロナウィルスという未曽有の世界危機がもたらしたものに急速なデジタル化(DX)が挙げられるでしょう。非対面・非接触コミュニケーションを実現するデジタル化によって、ビジネスのこれまでの常識が変わり、産業構造の変化すら起きている実情です。今まで安泰だと思っていた大企業ですらその禍に飲みこまれ、事業の転換を余儀なくされています。 このような状況において、学生の皆さんは大きな不安と悩みを抱えていることでしょう。誰も予想できない世の中にあっという間に変わったわけですから。就職活動という人生の転機を迎え、これからの人生を考えなくてはならない今、自分のこれまで学んできたことは正しかったのか?これからどの業界にいけば安心なのか?私は何のために就職するのか?そんな思いに苛まれている日々かもしれません。 しかしながら、これは学生に限ったことではありません。すでに仕事に就いている社会人すべての人に言えることではないでしょうか。これまでの常識が通じない世の中において、新たな未来に向けて、多くの社会人がスタート地点に立っているといっても過言ではありません。 急速なデジタル化によって企業や政府、ひいては社会のDXが進んでいきます。未来の話だと思っていたAIやロボティクスによって働き手が人からデジタルに変わっていくことが予想されていましたが、その現実を垣間見ています。私たち“ひと”にとって、多くの仕事が奪われることになるかもしれません。しかし、それだけで社会のピースが埋まるか?それは否です。“ひと”にとっての快適な社会、やさしい世界、温かいコミュニケーションは、“ひと”の発想や考えによって生まれるものだからです。 だからこそ、私はあえて今の学生に伝えたいのです。今、こうした不確実な時代だからこそ、なぜ就職するのか?働く意味はどこにあるのか?そのひとつの拠り所として「社会に必要とされる人になってほしい」と送りました。簡単なことではありません。社会に必要とされるためには、社会を俯瞰的にみる目が必要です。社会にあって不便なもの、困っている人、さらに便利にできる考え、そんなさまざまな社会に足りないピースが見えてくるはずです。そしてそれを知るために何より必要となるのは、“ひと”としてのやさしさです。“ひと”にやさしい社会の実現。デジタル化がもたらすべきは、そんな社会だと思うのです。デジタルが主役ではなく、“ひと”が主役のデジタル社会とは何か。改めてそれを考える時期かもしれません。 関連リンク LEADERS' AWARD ~20万人の学生があこがれる経営者アワード~...

プロダクション
2020年11月9日

Nuxt.jsで選択式クイズアプリを作ってみた(2)

本コラムについて 本記事は前回のコラムの続きとなっております。 前回ご紹介したアプリの実際のソースと、工夫した点を記載しております。 (共通ファイルやcssについての説明は省いております。本記事の最後に全体ソースを公開しておりますので、そちらからご参照下さい。) 前回のコラム:Nuxt.jsで選択式クイズアプリを作ってみた 工夫した点 問題文と選択肢は問題解答画面と解答結果画面の両方で呼び出しているため、コンポーネント化を行った。 解答をやり直したい場合もあるのを考慮し、前の問題に【戻る】ボタンを設置した。 解答結果画面では、自分が選択した解答と正しい答えが分かるようにした。 繰り返し問題が解けるように、問題と選択肢のランダム機能を作成した。。 作成したファイル ①メインページ(/pages/index.vue) ②トップ画面コンポーネント(/components/top.vue) ③問題解答画面コンポーネント(/components/questions.vue) ④解答結果画面コンポーネント(/components/result.vue) ⑤問題コンポーネント(/components/questions/qInfo.vue) ⑥コンポーネント共通Storeファイル(/store/common.js) ソースの中身 メインページ(①/pages/index.vue) 本アプリのページはこの1ページのみ。 画面中央に表示しているコンポーネント要素を切り替えることで、 複数の画面を表示させている。 <template> <div class="main"> <div class="top"> <top v-if="dispType === 'top'"></top> <questions v-if="dispType === 'questions'"></questions> <result v-if="dispType === 'result'"></result> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations, mapActions } from "vuex"; import Top from '~/components/top.vue'; import Questions from '~/components/questions.vue'; import Result from '~/components/result.vue'; import settingsJsonPath from '~/assets/json/settings.json'; // 設定ファイル export default { data() { return { } }, computed: { ...mapState('common', [ 'dispType', 'settingOption', ]), }, created () { this.readSettings(); // 初期表示設定 }, components: { Top, Questions, Result }, methods: { ...mapMutations('common', [ 'setSettingOption', 'setDispType', ]), /** * 初期表示設定 * * 設定ファイルをstoreに格納し、トップコンポーネントを表示 */ readSettings() { this.setSettingOption(settingsJsonPath); // 設定オプション情報をstoreに格納 this.setDispType('top'); // トップコンポーネントを表示 }, } } </script> ②トップ画面コンポーネント(/components/top.vue) 問題を選択する画面 汎用性を持たせるために、タイトルとボタンの表記は設定ファイルの内容から取得している。 <template> <div class="topComponent"> <h2 class="title">{{title}}</h2> <div class="contents"> <div class="select_question"> <p>問題を選択</p> <ul> <li v-for="(fileInfo, index) in settingOption.questionPaths" :key="index" @click="selectQuestion(fileInfo.filePath)" :class="{'selected': selectQuestionPath === fileInfo.filePath}"> {{fileInfo.title}} </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="showQuestionCoponent()" :disabled="!selectQuestionPath">{{btnName}}</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import axios from 'axios'; export default { data() { return { title: '', // メインタイトル btnName: '', // ボタン名 selectQuestionPath: '', // 選択した問題集のファイルパス } }, created() { this.selectQuestionPath = ''; // 選択ファイルパスのリセット this.setSettingName(); // タイトルとボタン名を設定 }, computed: { ...mapState('common', [ 'questionList', 'settingOption', ]), }, methods: { ...mapMutations('common', [ 'setDispType', 'setQuestionList', ]), /** * タイトルとボタン名を設定 * * 設定ファイルの内容からタイトルとボタン名を設定 */ setSettingName() { this.title = this.settingOption.title; this.btnName = this.settingOption.btnName; }, /** * 問題コンポーネントを表示 */ showQuestionCoponent() { this.readQuestions(); // 問題情報を読み込む }, /** * 問題情報を読み込む */ readQuestions() { axios.get(this.selectQuestionPath).then((response) => { this.setReadQuestions(response.data.questionList); this.setDispType("questions"); }).catch((error) => { console.log(error); }) }, /** * 読み込んだ問題情報をstoreに格納 * * @param {object[]} questionList 問題情報 */ setReadQuestions(questionList) { // 問題をランダムにする if (this.settingOption.randam) { questionList = this.shuffleArray(questionList); } // 選択肢をランダムにする if (this.settingOption.choiceRandam) { questionList.forEach((questionInfo, index) => { questionInfo.choice = this.shuffleArray(questionInfo.choice); }); } this.setQuestionList(questionList); // 問題情報をstoreに格納 }, /** * 選択した問題集のファイルパスを設定 * * @param {string} filePath 問題集のファイルパス */ selectQuestion(filePath) { // 既に選択している場合は選択状態を解除 if (filePath === this.selectQuestionPath) { this.selectQuestionPath = ''; } else { this.selectQuestionPath = filePath; } } }, }; </script> ③問題解答画面コンポーネント(/components/questions.vue) 問題を解答する画面 前の問題に【戻る】ボタン押下で1つ前に解答した問題に戻ることも出来る。 問題内容と選択肢は問題コンポーネントを呼び出して表示 <template> <div class="questionsComponent"> <div class="header"> <button class="btn btn-back" @click="showPreviousQuestion()" :disabled="qIndex === 0">前の問題に戻る</button> </div> <div class="contents"> <div class="quetion-area"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :answerList="selectAnswerList" :mode="'question'"></question-info> </div> <div class="btns-area"> <button class="btn" @click="answerQuestion(qIndex+1)">解答</button> </div> </div> </div> </template> <script> import { mapState, mapGetters, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { questionInfo: {}, // 表示する問題情報 qIndex: 0, // 問題のインデックス correctCount: 0, // 正解数 selectAnswerList: [], // 選択した解答リスト } }, created() { this.showQustion(); // 表示する問題情報をセット }, computed: { ...mapState('common', [ 'questionList', ]), ...mapGetters('common', [ 'getSelectChoiceStore', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common', [ 'setDispType', 'setCorrectCount', 'setSelectAnswerList', ]), /** * 表示する問題情報をセット */ showQustion() { this.questionInfo = this.questionList[this.qIndex]; }, /** * 解答ボタン押下処理 * * 答え合わせをして、次の問題を表示。最後の問題の場合は解答結果画面を表示。 * * @param {int} nextIndex 次の問題のインデックス */ answerQuestion(nextIndex) { this.checkCorrectAnswer(); this.qIndex = nextIndex; if (this.questionList[this.qIndex]) { this.selectChoise = ''; this.showQustion(); } else { this.setCorrectCount(this.correctCount); this.setSelectAnswerList(this.selectAnswerList); this.setDispType("result"); } }, /** * 前の問題に戻るボタン押下処理 * * 前の問題を表示。選択肢のラジオボタンも自分が解答した選択肢の値にする。 */ showPreviousQuestion() { this.qIndex = this.qIndex - 1; // 問題のインデックスを一つ前に設定 this.showQustion(); // 前の問題を表示 this.selectChoise = this.selectAnswerList[this.qIndex]; // 前の問題で選択した選択肢を設定 }, /** * 選択した問題の答えチェック * * 正解の場合は正解数をインクリメントする。解答リストに自分が選択した解答を追加。 */ checkCorrectAnswer() { if (this.getSelectChoiceStore === this.questionInfo.answer) { this.correctCount++; } this.selectAnswerList[this.qIndex] = this.getSelectChoiceStore; } }, }; </script> ④解答結果画面コンポーネント(/components/result.vue) 答え合わせをする画面 正答率だけではなく、自分が選択した解答と正しい解答を色分けで表示している。 <template> <div class="resultComponent"> <h2 class="title">全{{questionList.length}}問中、{{correctCount}}問正解です。</h2> <div class="contents"> <div class="answers"> <ul> <li v-for="(questionInfo, qIndex) in questionList" :key="qIndex"> <question-info :qIndex="qIndex" :questionInfo="questionInfo" :mode="'answer'"></question-info> </li> </ul> </div> <div class="btns-area"> <button class="btn" @click="backTop()">終了</button> </div> </div> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import QuestionInfo from '~/components/questions/qInfo.vue'; export default { data() { return { } }, created () { }, computed: { ...mapState('common', [ 'correctCount', 'questionList', ]), }, components: { QuestionInfo, }, methods: { ...mapMutations('common',[ 'setDispType', ]), /** * トップ画面に戻る */ backTop() { this.setDispType("top"); } }, }; </script> ⑤問題コンポーネント(/components/questions/qInfo.vue) 問題と選択肢を表示するコンポーネント 問題解答画面と解答結果画面の両方にて本コンポーネントを呼び出している。 <template> <div class="qInfoComponent"> <div class="header"> <p class="title"> 問{{qIndex+1}} <span v-if="mode === 'answer' && questionInfo.answer === selectAnswe...

マーケティング
2020年10月19日

ウェブサイト価値ランキング2020最新版 コロナ禍におけるデジタルメディアの重要性と新たなCXの再考を

本日、当社のシンクタンク組織「ブランド戦略研究所」より、ウェブサイト価値ランキングの最新版がリリースされました。こちらは週刊ダイヤモンド最新号の第2特集でも大きく取り上げられていますので、すでにご覧になっている方も多いかと思います。本記事は、コラムの一部を除いて全面的に私の方で記事を書かせていただきました。コロナ禍のランキングということで、その結果に注目していましたが、予想通り大きな変化が見られましたので、ランキングの内容に先立ち一部こちらのコラムでも紹介させていただきます。 突然ですが、皆さんは2020年をどのような気持ちで迎えらえたでしょうか?東京オリンピック・パラリンピックを控えた日本は、過去最高のインバウンド客の増加によって、誰もが日本経済のさらなる飛躍することに期待していたことでしょう。しかし周知のとおり、現実は新型コロナウィルスの感染拡大によって一変しました。国民の未知のウィルスへの不安は、緊急事態宣言というこれまでにない行動の制限によって増幅され、行動様式を根本的に見直す契機となりました。当然のことながら企業と消費者のコミュニケーションの在り方も変わらざるを得ない状況となります。ある意味では、ゼロからコミュニケーションを構築しなければならないことになった企業も少なくありません。 “非対面・非接触” “巣ごもり消費” “在宅テレワーク”が飛び交う今の時代において、皮肉にもこれまで遅れていたDX(デジタルトランスフォーメーション)は一気に進むことになり、この数か月で“デジタル”自体がコミュニケーションの主役となったことは言うまでもありません。 企業は、直営店で接触型の手厚い接客が困難な状況になっている今、オンライン上の直営店とされるデジタルメディアに大きな期待を寄せることになります。だからこそ、今回のウェブサイト価値ランキングにはこれまで以上の意義があります。コロナ禍におけるランキングは、さまざまな変化が見られました。これまで上位を独占していた航空2社(ANA、JAL)ですが、コロナウィルスによる影響により売上価値が10%~20%超と大きく減少しています。その他の上位企業においても、その影響は少なくありません。一方でこうした状況にも関わらずデジタルメディアの価値を上げた企業もありました。その代表格が今回初のランキングトップ10入りしたイオンでしょう。同社の取り組みは“非対面・非接触”をキーワードにした新たなショッピングの形の追求(例えばドライブイン型の買い物)など、これまでにない新しいCXの形を再考し、新たなサービスに還元しているところも大幅にランクアップした要因のひとつと言えます。 さらに家具のニトリ、メガネのJINSや、スポーツメーカーのNIKEなどは、“在宅テレワーク”に直結する在宅環境への対応・整備、健康対策などにデジタルメディア(主にアプリ)を活用し、ユーザーとの関係維持と強化を重視すると同時に、新たな時代の需要喚起を自社のビジネスに繋げるための努力が伺えます。このようにユーザーを取り巻く環境に、さまざまな変化をもたらしたウィズコロナ時代において、企業と消費者のコミュニケーションの在り方を改めて見直し、新たなCXの形を再考することが求められています。 企業にとってユーザーとのコミュニケーションにデジタルメディアが欠かせないのはもちろんですが、その役割や活用の仕方はオンラインだけでなく、オフラインとの融合も含めて考えなければなりません。ユーザーニーズはそれだけ複雑化し、そして新たな生活様式へと適応しようとしているのです。 ウィズコロナ時代の今だからこそ、改めて自社のデジタルメディアを見つめ直してください。DXとは、新たなCXの上に成り立つものです。CX(ユーザー体験の最適化)なくして、DX(企業のデジタル活用)はありえません。現状の自社のポジションを正しく見つめ、さらに今の時代の求められるユーザーニーズを正しく把握するためにも、今回のウェブサイト価値ランキングは参考になるに違いありません。 【報告会動画のご案内】 https://brand.tribeck.jp/video_webinar/ 関連リンク ランキング概要 ランキング一覧...

会社紹介・その他
2020年10月7日

-宣伝会議2020年11月号巻頭特集掲載- 「つなぐデジタル」で企業のブランドを進化させ、「ひとにやさしい」マーケティングで、ロイヤリティの最大化を支援してきた

私たちトライベックは今期20周年を迎えることになります。子会社の統合で新たなトライベックブランドとして船出しました。こうしたタイミングで今回、宣伝会議2020年11月号の巻頭特集「コロナ禍で見直す企業理念-ブランドの存在意義を再定義する-」でヤプリの庵原社長と対談する機会をいただきました。 新型コロナウィルスの拡大、デジタルの重要性再認識、変わる消費者の価値観。怒涛の勢いで変化し続ける時代において、経営者が考えることは何か。何を拠り所にこの不確実な時代を乗り越えるべきか。そんな思いを語らせていただきました。 私たちトライベックの理念である「ひとにやさしく、つなぐデジタルを」は、どんな時代においても普遍的なコンセプトであると考えています。企業として大事にしたい軸がどれだけ社員に浸透しているか。これが重要だということを改めて気づかされます。 そして、この対談を通じて私自身が一経営者として感じたことや大切なことを再認識したのでここに挙げておきます。 ・時代は変化する。テクノロジーは進化する。ひとの“心”は変わらない。 ・不確実な時代にこそ、普遍的な企業理念と社員に浸透させる努力を怠らない。 ・社長が主役ではない。主役は社員一人ひとりである。 ・ウィズコロナ時代に進むDX。人の気持ちに寄り添う中身のあるものに。 ・デジタルは魔法ではない。使いこなすためには“心”の理解が不可欠。 企業や協会などで講演をさせていただく機会が多いのですが、受講者の皆さんから最近多く受ける質問があります。 「これからの時代はどうなりますか?DXは大事だけどよくわからない…」 特に中小企業の経営者の中には、5年後やろうとしていたデジタルの波が一気に来たという感じで、一人歩きしているように思える「DX」という言葉に、漠然とした不安を抱えている方も多いのが事実です。 これからの時代はわかりません。それくらい不確実な時代です。ただしわかっているのは、デジタルが社会インフラとして欠かせないということです。そんな時代に大事なのは“ひと中心のサービス設計” “CX(顧客体験)設計”だと思います。誰のために、何のためデジタルを使い、結果として誰が、どれだけのメリットを享受するのかを考えることが大事です。デジタルは人の生活を豊かにするものであるということは間違いありませんが、道具に過ぎません。道具を使いこなすのは人であり、その人の気持ちに沿ったデジタル(道具)を使うことが真のDXと言えます。 時代の変わり目、不確実な時代だからこそ、改めて企業の本質、顧客の本質、デジタルの本質について見つめ直すことが求められているのではないでしょうか。 関連リンク 宣伝会議2020年11月号...

会社紹介・その他
2020年9月1日

ウィズコロナとなった激動の1年。逆風が吹き荒れる中、全員一丸となって苦難を乗り越え、新たな未来を描くべくNEXTステージへ

2020年9月1日。私たちの新たな一歩が始まります。20期という節目のスタートは、グループ3社(トライベック・ストラテジー、トライベック・ブランド戦略研究所、トライベック・プロフェッショナルサービス)統合により新たに生まれ変わった「トライベック株式会社」として歩むことを決めました。 また同時に2023年に向けた新中期経営計画を策定し、次の成長に向けたシナリオを全社で共有しました。気持ち新たに、そして大いなる希望に向かって、全社一丸となって取り組んでいきたいと思います。新たな中期経営計画「Welcome “Changes”」は、まさにコロナ禍にある世界全体が大きな変化の波にさらされる中で、これからの未来に欠かすことができない“デジタル”を主軸とした企業として、社会にあるべき姿を示し世界に影響力のある企業を目指す当社の志でもあります。 未知ウィルスとの闘いは長く、そしてウィズ/アフターコロナと呼ばれる社会においてこれまでの常識は通じないでしょう。生活様式のみならず、私たち生活者の価値観を大きく変えたこの流れは、経済活動を支える企業にとって新しい一歩を踏み出すチャンスだと考えています。 日本国内においてもデジタルシフトが叫ばれていた昨今ですが、それが加速度的に進んでいるとは言い難く、むしろ世界における日本のデジタル化は遅れていると言えます。そんな中で、待ったなしで変化を迫られている状況が突然やってきたわけです。しかしながら、それについていけない企業、とりわけ日本の99.7%を占める中小企業が大きく出遅れ、そして世界に置いていかれようとしているのです。日本における中小企業の沈没は、すなわち日本における経済の沈没を意味します。今この国の経済を支えているのは、一部の大企業ではなく、さまざまな技術や人、そして弛まない努力の結晶によって生まれた革新的なプロダクトやサービスの数々を生み続ける中小企業なのです。私たちトライベックは、そんな中小企業の一員として、そして日本という国の魅力を世界に届けるべく、改めて“デジタル”を武器に息を吹き返すための支援をしたいと考えています。 私たちは2001年に創業して以来、デジタルという専門性を武器に、企業のコミュニケーションの変化をいち早く捉え、そしてトランスフォーメーションしていくことに取り組んできました。今期20年目を迎えようとしている中で、改めて私たちが社会において果たすべき役割は何かを考えるきっかけとなっています。 新しい一歩を踏み出すために、この1年を振り返り、そして乗り越えてきたことを誇りに次の一歩につながる取り組みにチャレンジしていきたいと思います。 19期は苦難の連続。しかし諦めずに変化を前向きに受け止め前に進みました。 ・創業以来19期連続黒字で記録更新 ・HIRAMEKI XDが累積契約で300社を突破 ・トライベックの新しい働き方「トライベック・ニューノーマル」を施行 ・当社グループ実施の労働者アンケートで、働く満足度が7割超え 20期の新スローガンは「Welcome “Changes”」 【変化を受け入れ、変化を楽しむ、変化し続ける】 激動の時期だからこそ、私たちはその変化に真っ向から立ち向かい、そして新しい働き方を模索していきます。個人としても、会社としても大きな変化にチャレンジし、ワンチームとして社員も会社も成長し続けていくことを目指します。 新生トライベックは、新たな時代のビジョナリーカンパニーの先進企業として、そして世界に影響力のある企業として、社会に貢献できる100年企業を目指します。 ひとにやさしく、つなぐデジタルを デジタルで身近な「ストレス」を解消し、誰に対しても「やさしい」未来を創る。それが私たちトライベックの目指す世界です。 皆さまのビジネスを加速させるパートナーとして、いつでも相談できる頼れる存在として、さらには日本に、世界に驚きと感動を与えられる企業としての成長にご期待ください。 トライベック株式会社 代表取締役社長 .c-fl:first-letter{ font-size: 2.4em; font-family:sans-serif; font-weight:bold; } ...

マーケティング
2020年9月1日

コロナウィルスがもたらしたコミュニケーションの原点回帰。BtoBデジタルマーケティングに必要なデジタル×ココロとはなにか?

コロナウィルスが私たちにもたらしたものは何でしょうか。それは未知のウィルスという驚異だけではなく、これまでが当然だと思っていた日常や価値観を奪い去ったのです。しかしそれはすべてがマイナスだったのでしょうか。私は必ずしもそうは思いません。デジタルシフトが重要だと叫ばれていた近年において、日本はその取り組みが世界から後れをとっていたと言わざるを得ません。こうした中で、5年後、いや10年後と思っていたような未来が、コロナウィルスによって突然現実にもたらされたのです。非接触・非対面というキーワードは瞬く間に世の中に浸透し、それを実現させるためのデジタルは欠かすことのできないものと認識が広まりました。私たちは、これまでとは違い、はじめて企業のデジタルシフトを「ジブンゴト化」し始めたのです。 一方で急激なデジタル化がもたらす弊害にも目を向けなければなりません。それは人と人とのコミュニケーションが激減するという事実です。オンリーデジタルのコミュニケーションによって、「ココロ」が奪われ、本来人が持つ温かさがコミュニケーションに感じられなくなっていくことが懸念されます。 企業コミュニケーションにおいても同様で、過剰なデジタルシフトは、本来残すべき「温かみ」を感じるコミュニケーションとかけ離れてしまうことがあります。今一度、私たちは原点に戻ってあるべきコミュニケーションの姿を考え直す時期にあります。デジタル×ココロとは何か?BtoB企業のデジタルマーケティング成功のカギはここにあります。 関連リンク 変容する営業シナリオ リモートで欠けた情報を見直せデジタルマーケティングの明日 NIKKEI BtoB デジタルマーケティングアワード公式サイト...

プロダクション
2020年8月17日

とあるWebエンジニアの日々の情報収集と学習の方法について

はじめに この記事を書いた経緯ですが、コロナ渦の影響でリモートワーク対応がメインとなったことで通勤が無くなり、集中して学習する時間が増えたことがきっかけとなります。 普段の通勤電車の中でも情報収集や学習はできると思いますが、集中して行うことは容易ではないと思います。 集中できる時間が増えた今、自分が普段どの様に学習しているかという振り返りもかねて情報収集と学習の方法を書式化してみました。 個人的な意見もありますが、参考までに紹介させて頂きます。 IT・Web系のニュースサイトや個人のブログを回覧する 一番手軽に情報を収集できる手段ではないでしょうか。 ニュースサイトではトレンドランキング形式やカテゴリ毎に分類されていたりするので、総合的にIT・Web業界のトレンドをキャッチアップできます。 個人のブログではその技術に特化したコンテンツやニッチな情報もあるのが魅力だと思います。 またこれらのサイトにたどり着くには検索の仕方も関わってくるので、その時に必要な情報や、解決したい問題を明確にすることも大事です。 おすすめのWebサイト Qiita様々なプログラミングに関する知識・技術をユーザー同士が活発に共有しており、IT・Web業界のトレンドをキャッチアップするだけではなく、問題解決に繋がる記事も見つけることができると思います。 Twitterを活用する なにより情報の鮮度が高いと思います。 個人のエンジニアのアカウントをフォローするのもよし、コミュニティーのアカウントをフォローするのもよしですが、Twitterを見ていると思わず脱線してしまうような情報も沢山あるので業務中の閲覧はほどほどに。 おすすめのTwitterアカウント @jptechcrunch 日々のキャッチアップにおすすめ 主にIT系のスタートアップやWebに関するニュースを配信しているアメリカのブログメディア「TechCrunch」の日本版の公式アカウントです。 @webgl_shz Web上でこんな表現ができるの? と驚くWebGL(3次元コンピュータグラフィックス)に関連した情報が発信されてます。 YouTube動画を見る WebエンジニアYouTuberによる配信には、有料の動画学習サイトに匹敵する内容の動画も増えてきていると感じます。 動画と同じようにコードを書いたり、開発環境を整えたり「マネ」をする事が容易にできるのが動画学習の強みだと思います。 お気に入りのエンジニアを探してチャンネル登録をしてみてはいかがでしょうか。 おすすめのYouTubeチャンネル KENTA / 雑食系エンジニアTVIT・Web系の動向、エンジニアのキャリアについてフォーカスした動画配信が多いです。 技術書を読む インターネットと比べて情報の鮮度が出版されたときで止まってしまいますが、根源的な情報は活用ができると思います。 著者、出版社、言葉の言い回し...などもあるかと思いますが、まずは自分で試しに読んでみて「わかりやすい」と思った書籍を購入するのが良いでしょう。 ペーパーレスな時代ですが、個人的には書籍として実体があるほうが好きです。 おすすめの技術書 リーダブルコード 読みやすいコードを書くということに焦点をあてた書籍です。 読むと自分やチームメンバーが幸せになれるコンテンツが記述されてます。 コードを書く人は一読しておくと良いかもしれません。 アルゴリズムパズル-プログラマのための数学パズル入門 ただ単純にパズルを解くだけでなく、プログラムでどういうコードを書いたらパズルの問題を正解に導けるかというところまで考える必要があるので、コードを書くときの発想力を鍛えることができると思います。 さいごに 目まぐるしく変化するWeb技術を追うことは容易ではないですが、Webエンジニアの魅力のひとつとして「学ぶ楽しさ」だと思います。 普段の生活の中に無理のない範囲で情報収集や学習をする「くせ」を付けることが大事ですね。 また、体を動かす事も脳の活性化に繋がるので運動と学習を両立して日々のモチベーションを保ちたいと思います。 ...

広報・PR
2020年8月3日

私たちの新しい働き方「トライベック・ニューノーマル」

トライベックでは、「はたらく、にもっとバリューを」というコンセプトのもと、働き方改革を推進させる制度「.Style(ドットスタイル)」を全社で取り組んでいます。 テレワークは、今まで月4回までという基準が設けられていましたが、新型コロナウイルス感染拡大防止のため、3月下旬の都の外出自粛要請から全面在宅勤務となりました。その期間中に緊急事態宣言が発令され、解除されてからの働き方を全社で検討しておりました。その結果、6月から「トライベック・ニューノーマル」をスタートさせました。 嬉しい「ニューノーマル特別手当」 テレワークは今までもありましたが、上限を撤廃し月60%以上となることで、メインの働き方となりました。ちょっと高いけど美味しいコーヒーを調達したり、備品を購入したり、仕事がはかどる居心地のいい環境を作るのに試行錯誤しましたが、おかげで在宅ワークのスタイルができあがってきたのではないかと思います。 最近ハマっているのはナッツとドライフルーツ 在宅ライフで困っていることなどを各ユニットでヒアリングし、役員に課題をあげることで、会社より「ニューノーマル特別手当」が支給されることとなりました。これは環境設備費(ネットワークや暖房・冷房、備品購入、通信費など)として、月5,000円が全社員に支給されるというものです。ありがたいですね。 その他にも、オンライン飲み会(ランチや懇親会)についても、月一人1,000円まで補助してもらえることとなりました。ワンランク上の缶ビールとちょっと手が出せなかった珍味が買えてオンライン飲み会ができるというバンザイ在宅ライフです。 トライベックは、みんなが集まってワイワイ飲み会をするのが大好きな会社のため、オンライン上だけというのがかなり寂しいですが、当分の間イベントができないのは仕方がありません。 オフィスは「ソーシャルディスタンス」を意識 オフィス利用時は、入口で消毒、検温、マスク着用が義務づけられました。またデスクは「ソーシャルディスタンス」を意識した、前も左右も人のいないつくりにしました。席をひとつ飛ばして、ジグザグになるよう市松模様のような配置にし、席数も50%削減となりました。もちろん各テーブルには消毒液が設置してあります。 トライベックは決断が早い 3月下旬の都の外出自粛要請を受けてから全面在宅に入り、5月下旬の緊急事態宣言の解除、6月には新しい働き方制度がスタートしました。非常にスピーディな対応だったと思っています。トライベックはユニット制になり、小さなグループになったことでディスカッションも活発に行われるようになりました。またそれに応え、会社も決断が早いです。その時々にあわせた柔軟な変容がこれからは必要になってくるのかもしれませんね。 関連リンク 「トライベック・ニューノーマル」 ...

プロダクション
2020年7月6日

Nuxt.jsで選択式クイズアプリを作ってみた

経緯 トライベックでは定期的にLearning.Styleという業務研修を行っており、各部が他の部に向けて講義を行っています。 私が所属する部ではHTML,CSS,JSについての講義を行っているのですが、 ただ聞いてもらうだけでなくハンズオン形式で出来たら頭に入ってきやすい、 選択式クイズアプリをNuxt.jsを用いて作ってみました。 利用した技術 ■Nuxt.js vue.jsのフレームワークです。 ルーティングを管理行える「Vue-Router」や状態管理を簡単に行える「Vuex」といったパッケージが最初から入っているため、開発が楽に出来ます。 静的ファイルの作成も出来るので、今回は出力した静的ファイルを社内の共有サーバーに設置して、講義を受けている人に見てもらうようにしました。 製作時間 5時間くらい 完成品 作成した画面数は3つになります。 トップ画面 初めに表示される画面。問題集一覧をJSONから読み込み、画面に表示する。 問題集を選択し、【問題を解く】ボタンを押下すると、対象の問題集の情報を読み込み問題解答画面に遷移する。 問題解答画面 選択式の問題が出題される画面。答えだと思う選択肢を選び【解答】ボタンを押下。 誤ってボタンを押してしまったときのために前の問題に戻ることも可能。 設定ファイルをいじることで、問題や選択肢の順番をランダムにすることも可能。 全ての問題に解答すると解答結果画面に遷移する。 解答結果画面 各問題について答え合わせが出来る画面。 間違った場合は自分の選んだ項目が赤色で表示され、正解の項目が緑で表示される。 【終了】ボタン押下でトップ画面に遷移する。 ファイル構成 ・ ├── assets ├── components │ ├── questions │ │ └── qInfo.vue 問題のコンポーネント(問題文+選択肢) │ ├── questions.vue 問題解答画面のコンポーネント │ ├── result.vue 解答結果画面のコンポーネント │  └── top.vue トップ画面のコンポーネント ├── dlist ├── layouts │ └── default.vue ページのレイアウト ├── middleware ├── pages │ └── index.vue 本システムのメインページ ├── plugins │ └── commonFunc.vue 共通関数を定義 ├── static │ └── json │  ├── question_css.json cssに関する問題集 │  ├── question_html.json htmlに関する問題集 │  ├── question_js.json jsに関する問題集 │  ├── question_other.json CMSや通信に関する問題集 │  └── settings.json 本システムの設定ファイル └── store └── common.js コンポーネント間の値の受け渡しを行う ■assets 共通のCSS(SCSS)や画像ファイルなどを格納。 ■components コンポーネントファイルを格納。 ■layouts ページの外観を設定できる。共通ヘッダー・フッターを設定できる。 ■middleware ページが表示される前に実行したい処理などを定義する。 ■pages アプリケーションのビュー及びルーティングファイルを格納。 ■plugins インスタンス化する前に実行したい JavaScript プラグインを格納。 ■static ここに置かれたファイルは直接サーバのルートに配置される。JSONファイルは誰でも簡単に修正できるようにこのディレクトリ内に配置。 ■store vuexストアのファイルを格納 工夫した点 解答ページを作成することで、答え合わせを行えるようにした。何問正解したが分かるようになっており、正解の選択肢もハイライトにして分かりやすくしている。 JSON形式の設定ファイルを作成することで、ソースを修正しなくてもタイトルの修正や問題の差し替え、問題や選択肢のランダム機能のON,OFFを設定できるようにした。(※1) (※1)下記のようなJSONファイルを"static/json/"配下に設置 setting.json { "title": "web問題集", "btnName": "問題を解く", "questionPaths":[ { "filePath": "./json/question_html.json", "title": "HTMLの問題" }, { "filePath": "./json/question_css.json", "title": "CSSの問題" }, { "filePath": "./json/question_js.json", "title": "JSの問題" }, { "filePath": "./json/question_other.json", "title": "Webその他問題" } ], "randam": true, "choiceRandam": true } title→システムのタイトル btnName→トップページのボタン名 questionPaths.filePath→問題集のパス questionPaths.title→問題集のタイトル randam→問題のランダムのON(true),OFF(false) choiceRandam→選択肢のランダムのON(true),OFF(false) 問題ファイルのJSONは下記のようなフォーマットになっている。 下記はHTMLの問題集(static/json/question_html.json) { "questionList": [ { "no": 1, "question": "段落を指定するためのタグは次のうちどれか。", "choice": [ "p", "span", "pre", "div" ], "answer": "p" }, { "no": 2, "question": "リンクの出発点と到達点を指定するために使われるタグは次のうちどれか。", "choice": [ "p", "span", "a", "table" ], "answer": "a" }, ... ] } no→問題のインデックス question→問題の内容 choice→問題の選択肢 answer→問題の解答 新しい問題を作成したい時は、先に問題ファイルの作成し、設定ファイル(setting.json)にパスを記述してあげるだけよい。 改良案 ■問題JSONファイルのフォーマット変更 現状は選択した選択肢と"answer"の値の完全一致で成否を判定しているが、 選択肢にもIDを振り、answerにはそのIDを設定するように改良。 ■記述形式にも対応 現在は選択式の問題しか作成できないため記述式の問題も作れるように改良。 問題ファイルに問題形式のkeyを追加(選択式 or 記述式)。 さいごに 今回は作ったシステムの大まかな概要を説明しましたが、次のコラムでは本システムのソースコードを交えながら各コンポーネントの説明が出来ればと思います。 ...

プロダクション
2020年6月22日

classのシンプルなグリッドシステム

今やWebページのレイアウトメソッドとしてすっかり定着したグリッドデザイン。近年では、flex-boxやCSS gridの登場でますます使い勝手が良くなっていますね。一方で、マルチカラムレイアウトのためだけにBootstrapなどの大がかりなフレームワークを導入したり、複雑なCSSを書き起こしたりするのはちょっとめんどう。 12カラムグリッドシステムのイメージ そこで今回は、簡単なclassだけで手軽に3パート・レスポンシブのマルチカラムレイアウトを実現するシンプルなグリッドシステムを作ってみます。 いつも悩ましい多重class 広く利用されているコンポーネントフレームワークBootstrapにも、一般的な12分割タイプのグリッドシステムが搭載されています。たとえば「スマホは2カラム、タブレットは3カラム、PCは4カラムで」といったレイアウトをする場合、下のようにclassを記述します。 <div class="row"> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> <div class="col-6 col-md-4 col-xl-3"></div> </div> Bootstrapのグリッドシステムは「12を分母とする分数の分子」で列幅を指定するのが特徴で、指定方法こそ慣れれば問題ないものの、classがいくつも並ぶのはもう少しすっきりさせたい気がします。また、12分数で表現できない5カラムや8カラムといった列数が実現できないのも少し物足りないですね。 1クラスで書けたら簡単だけど…… シンプルにひとつのclassだけでメディア別に異なるカラム数を設定したい。たとえば上記の「スマホは2カラム、タブレットは3カラム、PCは4カラム」というレイアウトならば、 <div class="row"> <div class="col2-3-4"></div> <div class="col2-3-4"></div> <div class="col2-3-4"></div> <div class="col2-3-4"></div> </div> こんな風に1クラスで書けたら、直感的だし楽チンでよいのではないでしょうか(ハイフンで区切られた3つの数字には1~12の何を入れてもよい)。ついでに5カラム、7カラム、8カラムといった、12分割ルールでは割り切れなかった段組みにも対応できたらもっとすてきです。 パターンは5,184通り ですが、1クラスであらゆるレイアウトパターンを網羅しようとすると、 12×12×12×3=5184 OMG、5,184通りものスタイルを定義しなければいけません。 .col1-1-1 { width: 100%;} .col2-1-1 { width: 50%;} .col3-1-1 { width: 33.3333%;} : : .col12-12-10 { width: calc( 100% / 10 );} .col12-12-11 { width: calc( 100% / 11 );} .col12-12-12 { width: calc( 100% / 12 );} 5,184通りを列挙することじたいはExcelなどを使えばたやすいですが、このシステムだけのために5000行以上あるCSSをページに読み込ませるのは人道にもとる行為とのそしりをまぬがれません。もっと合理的な方法を考えましょう。 属性セレクタを使う 属性セレクタには、属性名、属性値の完全一致、前方一致、後方一致、部分一致など多様なマッチングオプションがあります。これをうまく活用すれば5,184種類のスタイルを賢く合理化できそうです。 ハイフンで区切られた3つの数字のうち、最初の数字は前方一致、真ん中の数字は部分一致、最後の数字は後方一致でマッチングさせます。 /* 前方一致・スマホ用 */ [class^="col1-"] { width: 100%;} [class^="col2-"] { width: 50%;} : : /* 部分一致・タブレット用 */ [class*="-1-"] { width: 100%;} [class*="-2-"] { width: 50%;} : : /* 後方一致・PC用 */ [class$="-1"] { width: 100%;} [class$="-2"] { width: 50%;} : : これなら、それぞれのメディアクエリについて12種類ずつ、計36パターンのスタイルを定義するだけで5,184通りのレイアウトに対応できます。 できました! デモページ CSS .row { display: flex; flex-wrap: wrap; } .row > * { flex-grow: 0; flex-shrink: 0; } .row [class^="col1-"] { width: calc( 100% / 1 );} .row [class^="col2-"] { width: calc( 100% / 2 );} .row [class^="col3-"] { width: calc( 100% / 3 );} .row [class^="col4-"] { width: calc( 100% / 4 );} .row [class^="col5-"] { width: calc( 100% / 5 );} .row [class^="col6-"] { width: calc( 100% / 6 );} .row [class^="col7-"] { width: calc( 100% / 7 );} .row [class^="col8-"] { width: calc( 100% / 8 );} .row [class^="col9-"] { width: calc( 100% / 9 );} .row [class^="col10-"] { width: calc( 100% / 10 );} .row [class^="col11-"] { width: calc( 100% / 11 );} .row [class^="col12-"] { width: calc( 100% / 12 );} @media (min-width: 668px) { .row [class*="-1-"] { width: calc( 100% / 1 );} .row [class*="-2-"] { width: calc( 100% / 2 );} .row [class*="-3-"] { width: calc( 100% / 3 );} .row [class*="-4-"] { width: calc( 100% / 4 );} .row [class*="-5-"] { width: calc( 100% / 5 );} .row [class*="-6-"] { width: calc( 100% / 6 );} .row [class*="-7-"] { width: calc( 100% / 7 );} .row [class*="-8-"] { width: calc( 100% / 8 );} .row [class*="-9-"] { width: calc( 100% / 9 );} .row [class*="-10-"] { width: calc( 100% / 10 );} .row [class*="-11-"] { width: calc( 100% / 11 );} .row [class*="-12-"] { width: calc( 100% / 12 );} } @media (min-width: 1025px) { .row [class$="-1"] { width: calc( 100% / 1 );} .row [class$="-2"] { width: calc( 100% / 2 );} .row [class$="-3"] { width: calc( 100% / 3 );} .row [class$="-4"] { width: calc( 100% / 4 );} .row [class$="-5"] { width: calc( 100% / 5 );} .row [class$="-6"] { width: calc( 100% / 6 );} .row [class$="-7"] { width: calc( 100% / 7 );} .row [class$="-8"] { width: calc( 100% / 8 );} .row [class$="-9"] { width: calc( 100% / 9 );} .row [class$="-10"] { width: calc( 100% / 10 );} .row [class$="-11"] { width: calc( 100% / 11 );} .row [class$="-12"] { width: calc( 100% / 12 );} } Sass .row { display: flex; flex-wrap: wrap; > * { flex-grow: 0; flex-shrink: 0; } @for $i from 1 through 12 { [class^="col#{$i}-"] { width:calc( 100% / #{$i} ); } } @media ( min-width: 668px ) { @for $i from 1 through 12 { [class*="-#{$i}-"] { width:calc( 100% / #{$i} ); } } } @media ( min-width: 1025px ) { @for $i from 1 through 12 { [class$="-#{$i}"] { width:calc( 100% / #{$i} ); } } } } ...

プロダクション
2020年5月25日

faviconをアニメーションさせてみる

ブラウザのタブに表示されるfaviconが通知を教えてくれることがあります。赤いマークがついたりして、新着情報があることをfaviconがユーザにメンションしてくれます。なかなか気の利いた心遣いです。 通知が来るとリアルタイムでfaviconが変化し、通知に目を通すとその場で元に戻るので、表示するfaviconを動的に切り替えていることがわかります。 ということは、faviconを一定間隔で次々に切り替えていけばパラパラ漫画のようにアニメーションさせられるかも? ──という子供のような思いつきを実行に移してみます。 本当にfaviconを変更できるか? まずは、faviconを簡単に切り替えられるかどうか実験してみます。faviconを2枚用意して、ボタンを押すと切り替わるだけのjQueryを書きました。 <button><img src="./favicon-a.png"></button> <button><img src="./favicon-b.png"></button> $(function() { $('button').on('click', function() { $('link[rel="icon"]').attr('href', $(this).find('img').attr('src')); }); }); 結果は、 うまくいくようですね! どれくらいの速さで動くか? 次に、どのくらいの頻度でfaviconを切り替えられるか実験します。先ほど使った2枚のfaviconをsetIntervalで交互に切り替えるjQueryを書きました。フレームレート(秒間何枚の画像を切り替えられるか)をあれこれ変更して確認します。さてWebコンテンツのようにサクサク書き換わればよいのですが…… <link rel="icon" href="./favicon-a.png" data-alt="./favicon-b.png"> $(function() { const frameRate = 220; //フレームレート(ms) const $target = $('link[rel="icon"]'); window.setInterval(function() { const favIcon = $target.attr('href'); const altIcon = $target.attr('data-alt'); $target.attr({ 'href': altIcon, 'data-alt': favIcon }); }, frameRate); }); 結果は、 実験の結果、筆者の環境ではChromeで約4.5fps、Firefoxでは約9fpsと、想像以上に低いフレームレートでした(一般的な動画は約30fps)。これより切り替え頻度を上げるとコマ落ちします。あまりリッチな表現はできなそうです。 アニメーションを作る フレームレートの低いカクカクの動きしかしてくれないことがわかりましたので、アニメーションも割り切って地味なものにします。「ハートマークが拡大しながらフェードアウトしていく」という簡単な6フレームのアニメーションを用意しました。 最終フレームは通常時のアイコンにしてあります。アニメーション終了後、初期状態にリセットする手間をはぶくためです。 きっかけを与えると上の6フレームのアイコンが一周する、というjQueryを書きました。ハートマークのボタンを押すとアニメーションが走ります。 $(function() { const frameRate = 220; // フレームレート(ms) const frameAmount = 6; // フレーム数 let frameCount = 0; // 現在のフレーム let animationId; // setInterval用ID // [関数]アニメーション開始 function startAnimation() { animationId = window.setInterval(animateFavicon, frameRate); } // [関数]アニメーション処理本体 function animateFavicon() { if (frameCount < frameAmount) { const faviconPath = './frames/favicon_' + frameCount + '.png'; $('link[rel="icon"]').attr('href', faviconPath); frameCount++; } else { // 最後のフレームまで行ったら停止し、カウンターをリセット clearInterval(animationId); frameCount = 0; } } // クリックイベント $('button').on('click', function() { startAnimation(); }); }); 結果…… 地味……! でも、うまくいきました。低いフレームレートと狭い面積という制限はありますが、アイデアしだいでサイトに便利なインタラクションをつけ加えることができるのではないでしょうか。 なお、切り替えのたびにアイコン画像のリクエストがWebサーバに飛ぶことには注意が必要です。ループで回しっぱなしにしたり長大なアニメーションを組んだりするとサーバの負荷になるかもしれません。 ...

会社紹介・その他
2020年3月23日

男性初の育休を取得しました

コンサルタントの加藤です。管理職にあたる立場でもありましたが、第一子誕生に伴い、育児休業制度を利用して4か月間の休職期間を取得しました。トライベックでは、男性がこの育休を取得するのは初の事例となりました。 育休を取得したことで、 ●子育ての大変さと尊さを身に染み入るほどに痛感する ●妻と協力して子育てをしていくことでコミュニケーションがより活発になる などうまく言い表せないところもありますが、非常に良い人生経験を積むことができました。 また、取得期間が4か月間であることを知り合いなどに話すと、「4か月も取得ができてすごく良い会社ですね。」と言われることが多く、会社の懐の深さを感じられました。 育休中の体験は様々ありましたが、会社のコラムということもあり今回は、仕事面についてのメリットや復帰にあたっての苦労などを記載していきます。 業務の最適なアロケーション 私の主な業務としては、サイトリニューアルを中心に新規案件に対してWebコンサルタントとして関わっていくことです。ただ、クライアント側でサイトのすべてを運用しない場合などにおいては、リニューアルの流れでスポットとして対応依頼をいただくことも多くあります。その流れがいくつか溜まっていって、本来の注力分野である新規案件に携わる機会が少しずつなくなっている状態でもありました。 育休の機会にスポット対応が得意な方へ移管していく、また部門全体で業務の最適配置を見直す契機ともなり、各自がより適性に合った業務に付けるようになりました。 引継ぎによる担当案件の見える化 育休に向けては、取得予定の半年前から上長に相談をしはじめ、その後3か月前ほどから引継ぎ書類を合間時間で作成し始めていきました。引継ぎにあたっては、自分だけが知っていることや暗黙知の部分も、引き継いでもらうメンバーに同時に伝えていかないと十分ではありません。 案件全体概要として、経緯、商流、作業フロー、注意点など、自分の持っている知見や情報を資料に全て落とし込んでいくことで、スムーズな引継ぎができます。さらに、その中で、反省点や改善点が見つかったりすることもあるので、引継ぎ資料をただ作るだけ以上の効果がありました。 後輩の成長を実感 復帰して、これを感じられたのが一番よかったことでもあります。案件を後輩メンバーに引き受けてもらうこともあり、信頼はしていましたが少し不安な面も正直ありました。体制面での変更を行ったことも大きいと思いますが、後輩メンバーが想像以上に大きく成長していて、逞しくなっていました。毎日会っていると日々の成長を感じにくかっただけかもしれませんが、彼らの成長を感じて、復帰後の良い刺激になりました。 一方で苦労した点もありました。 仕事がうまく進んでいるかの心配 自身の性格上の特性もありますが、育児休暇を取得した直後は、引き継いだ仕事はうまくいっているか何か問題が起きていないか非常に心配になりました。はじめの2~3週間くらいは、隙を見つけてはメールを確認してしまっていました。そのことで妻に迷惑もかけてしまいました。日にちが経つにつれて問題もないことが分かり安心できたので、メール確認頻度も減っていきました。 仕事感覚の鈍化 当たり前ではありますが、復帰してから仕事に慣れるのには時間を要しました。仕事始めでは頭の回転スピードが驚くほどに遅くなっており、少し落ち込みました。 稟議や申請書といった社内業務のフローもすぐに忘れてしまうほうなので、徐々に慣れていくしかなかったですが、少し時間がかかった気がします。 終わりに 冒頭でも記載しましたが、男性で育休を取得したのは私が初の事例となります。この制度を利用した良いケースとなって、後に続きやすい雰囲気を作っていくことが重要だと考えています。そのために私自身が仕事に邁進して、さらに活躍していく姿を示していきたいと思います。...

お問い合わせ

Web戦略策定からサイト構築、オペレーションまで、最適なワンストップのソリューションを提供します。
お気軽にお問い合わせください。

関連コンテンツ