Vue.jsからGTMを使ってGAのイベントを送る - GAミント至上主義
ブログタイトルのGAはGoogle Analytics（以下GA）ではないですが、Google Tag Manager（以下GTM）でGAを読み込んでいる場合、独自イベントの送信がちょっと面倒です。 下記のようなVueプラグインもあるけど、Vue.jsの環境はVue CLI 3で、GTMのタグはindex.htmlに公式通りに入れているため、今回はスルーした。 www.npmjs.com dataLayerを使う GTMから独自変数を送るにはdataLayerというグローバル変数を使うらしい。 Developer Guide | Google Tag Manager for Web Tracking | Google Developers dataLayerを制するものはGTMを制す - Qiita こんな感じでなんでも送れる。 dataLayer.push({'event': '
Movable Typeでjsファイルをアセットで管理できない
jsファイルをアセットからアップロードできないようだったので、対応方法を調べてみました。 対応方法 特に設定などを行わないでアセットからjsファイルをアップロードしようとした場合、以下のようにエラーが表示されます。 アセットのアップロード制限を変更したい場合、mt-config.cgiにDeniedAssetFileExtensionsという環境変数を追加することで変更できます。 DeniedAssetFileExtensionsの初期値は以下のようになっています。 DeniedAssetFileExtensions ascx,asis,asp,aspx,bat,cfc,cfm,cgi,cmd,com,cpl,dll,exe,htaccess,htm,html,inc,jhtml,js,jsb,jsp,mht,mhtml,msi,php,php2,php3,php4,php5,phps,p
JavaScriptでの絵文字の扱われ方を知っていますか？ - SMARTCAMP Engineer Blog
スマートキャンプの20卒エンジニアの高砂です！ 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか？ 本記事では、その背景と適切な方法を解説していきます！ JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適切に扱う方法 まとめ JavaScriptにおける絵文字の問題点 JavaScriptで文字数カウントを実装する際、素直に考えると下記のようなコードになるかと思います。 const text = 'おはよう😊' console.log(text.length) しかし、実は「絵文字が含まれている文字列は.lengthでは適切にカウントできない」という問題点があるのをご存知でしょうか？ 実際にご覧頂くのが早いと思うので、CodePen様をお借りして文字数カウントをしてくれるアプリを簡単に作ってみました。 以下に置いておきますので
Brightcove（ブライトコーブ）の埋め込み動画をJavascriptで制御（再生・停止） - Qiita
ブライトコーブの埋め込み用タグには大きく分けて2つの埋め込み方法があります。 一つはiframeでの埋め込み。もう一つはvideoタグでの埋め込みです。 今回はvideoタグでの埋め込みについて説明していきます。 初期の埋め込みコード まず始めに、ブライトコーブのアカウントを自分たちで管理していない場合は、 iframeではなく以下のようなvideoタグのコードを提供してもらうようにしてください。 コードを生成する際にレスポンシブにチェックが入っていると、videoタグをwrapするdivが追加されます。 背景の全画面表示にする場合などは不要なため、videoをwrapしているdivは適宜削除しましょう。 videoタグのstyle属性もCSSで記述するほうが管理しやすくなるので削除します。 <div style="position: relative; display: block; m
【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと
Vue.jsの続きです。前回まではVue.jsのUIフレームワーク、Vuetifyにトライしました。今回からはWebアプリケーション開発のフレームワーク、Nuxt.jsにトライ。今回は概要を掴むために調べたことについて。それではいきましょう！ 【目次】 Nuxt.jsはVueアプリケーション生成フレームワーク Nuxt.jsの構成 主要な機能 できること Vue.jsの弱点 クライアントサイドのレンダリング データの管理（コンポーネントの連携がしづらい） ルーティング管理 Nuxt.jsのメリット サーバサイドレンダリング データ管理（コンポーネントの状態管理） ルート管理 プロジェクトの生成ビルド（静的ファイル生成） 最後に 前回の記事はこちら ※参考：【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置（v-carousel、v-carouse
【TC39 Proposals】New Set methods - Qiita
注意書き 2019 年 10 月 9 日に開催の #tc39_study 用に作成した資料です。 執筆時点で TC39 の Proposals に上がっている機能を紹介します。 将来的に JavaScript（ECMAScript）に取り入れられるかもしれませんし、取り入れられないかもしれませんし、紹介内容から仕様が大きく変更になるかもしれません。 TC39 の承認プロセスについては、https://tc39.es/process-document/ をご覧ください。 現状の Set オブジェクトには、要素の追加・削除、要素が集合に含まれているかの基本的な操作しか提供されていません。 この Proposal は Set オブジェクトに集合操作のメソッドを追加するものです。 他の言語や Immutable.js などのライブラリで使われているものと同等の機能を標準に取り入れます。 執筆時点で
Trusted Typesを利用してJavaScriptからのDOM操作をセキュアに行う
ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU
4歳娘「パパ、constしか使わないで？」 - Qiita
休日ワイ ワイ「（カタカタカタカタカタ・・・）」 ワイ「（ッターーーーン！！！）」 ワイ「あっ、ぜんぶ消えてもうた」 娘（4歳）「パパ？」 娘「私のお願いしたシステム、作ってくれた？」 娘「曜日によって色々なメッセージが表示されるシステム」 ワイ「おお、鋭意製作中やで（震え声」 ワイ「今、休日かどうかを表示する機能のコーディングを開始したところや」
PhantomJS と CasperJS で複数ページを一括キャプチャする ｜ Tips Note by TAM
Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
Netlifyをしばらく使ったので所感を書いておきます。 - Rso's Jotter
前回は kintone について 所感を書きましたが、今回はNetlifyについて書きます。 rso.hateblo.jp Netlifyとは 静的ファイルホスティングサービスの部類に属し、いわゆるHTML/Javascript/CSSで完結するサイトをサクッと公開でき、それに関連する様々な機能を提供しています。提供している機能としては、例えば、 HTTPS化、SSL証明書の発行(Let's Encrypt) githubなどのリポジトリ連携、ビルド、デプロイなどのCI機能 デプロイプレビュー環境の自動作成 サーバサイドサポート(Lambda Function) 入力フォーム 認証 A/Bテスト, アクセス分析 などがあります。 静的ファイルサイトなので、サーバサイドの動作が必要になるアプリケーション(PHP, Rails)などは対応できません。 自社の業務や個人的なツールやハッカソンなど
PACE — Automatic page load progress bars
What is Pace? Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Download If you’re a developer, download Pace directly here: Pace.js Themes Enter a color:
画像URLを指定するとLGTM画像に変換するサービスをAWS Lambdaで作ってデプロイするまで - Qiita
この記事の内容 この記事には以下の内容が含まれています。 作ったアプリの仕様の説明 画像にLGTM文字列を合成するAWS Lambdaのコード CloudFront->API Gateway->Lambda構成での設定 お名前.comで取得したドメインをCloudFrontに適用する際に、ACMで証明書を取得する流れ LGTM画像関連のサービス LGTM画像を生成したり探したりするサービスは色々あります。 LTTM LGTMoon LGTM.in LGTM Editor LGTM Generator LGTM Hub 日々お世話になっていますが、私も簡単なものを作ってみました。 calgtm 何これ GUIなしで、クエリパラメータに画像URLを指定するとLGTM画像にして返却するだけのサービスです。 以下のURLの${img_url}に画像URLを指定すると、LGTM画像となって返却されま
今話題の3Dファイル形式「glTF」でWebGLの表現力を高めよう！ - Qiita
この記事は WebGL Advent Calendar 2016 の６日目の記事です。 ※glTFフォーマットの現在の最新バージョンは「glTF2.0」です。**本記事はglTF1.0について書かれた記事ですのでご注意を。1.0と2.0は互換性がなく、少なからず相違点があります。**glTF1.0のアセットは現在ほとんど流通していないため、本記事は参考程度にしてください。 glTF2.0に対応した記事はこちらになります。まだ未完成ですが随時加筆していきます。 はじめに 〜 glTFとは 〜 glTF (The GL Transmission Format)とは、OpenGL系のAPI (WebGL, OpenGL ES, OpenGL) と親和性の高い、ランタイム用途向けのアセットフォーマットです。 特にWebGLにとっては、特定ライブラリに依存しない、本格的な汎用３Dフォーマットの決定版
GitHub、JavaScriptパッケージ管理のnpmを買収
米Microsoft傘下のGitHubは3月16日（現地時間）、JavaScriptのパッケージ管理システム「npm」をオープンソースで提供する米npm, Inc.を買収することで合意に達したと発表した。買収総額などの詳細は公表されていない。買収完了後もnpmのパブリックレジストリは無料で提供を続ける。 npm, Inc.は、エンジニアのアイザック・シュリューター氏が2009年にオープンソースで公開したnpmを持続させるために2014年に立ち上げた非公開企業。 npmは、サーバ側で動作するJavaScript「Node.js」を使うパッケージを管理するツール。パブリックレジストリは現在、1カ月に750億回ダウンロードされており、約1200万人の開発者が130万以上のパッケージを利用している。この他、有料のレジストリも提供している。 GitHubは公式ブログで、この買収により、npmの高速性
Facebookのクローラのみを許可する方法
使う機会は多くないですが、BASIC認証をかけているサイトなどでFacebookデバッガーを使って情報を確認したい時、そのままだと401になってしまい確認できないのでFacebookのクローラのみを許可する方法。 .htaccessの場合 .htaccessを使う場合はファイルの最終行が改行されている必要があるので注意。 SetEnvIf User-Agent "^facebookexternalhit.*$" fb_crawler SetEnvIf User-Agent "^facebookplatform.*$" fb_crawler Allow from env=fb_crawler PHPの場合 ハッシュフラグメントなどでFacebookシェアのためだけの専用ページがある場合など。 $ua = $_SERVER["HTTP_USER_AGENT"]; if(!preg_match(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Three.jsで大学をVR化した
GitHub Actionsで始めるお手軽Jamstack
noteをNuxt.jsで再構築した話
Philter - Control CSS filters with HTML attributes
4歳娘「パパ、懐かしいJavaScript書いてるね！」 - Qiita
