Dynamic Rendering（ダイナミック レンダリング）に関する技術ドキュメントをGoogleが正式公開 | 海外SEO情報ブログ
[レベル: 上級] Dynamic Rendering（ダイナミック レンダリング）に関する技術ドキュメントを Google は正式に公開しました。 Dynamic Rendering は、JavaScript を多用したウェブページをより確実に Google にクロール、インデックスさせるための技術です。 今年5月の Google I/O で、Google の John Mueller（ジョン・ミューラー）氏が発表しました。 先週参加した BrightonSEO では、Martin Splitt（マーティン・スプリット）氏が、公式ドキュメントを今週正式に公開する予定だとコメントしていました。 Dynamic Rendering とは まず初めに、Dynamic Rendering がどういったものかを説明します。 Dynamic Rendering では、ブラウザには通常のページを返しま
JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき - Qiita
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
javascript で作成したCSVファイルをエクセルで表示可能にする - Qiita
■パターン1 Win / Mac共に文字化け ■パターン2 Winでは私の環境では文字化け発生しなかったが、ググってみるとバージョンによってはUTF-8だと文字化けするという声が多いので、ちょっと不明。 Macで文字化け。Macに対応させるにはUTF-16が必須。 ■パターン3 Macでの文字化けは解消されるものの、エクセルで表示させるとカンマの存在も虚しく、1セルにすべて表示されてしまう。 ↓こんな感じ ■パターン4 拡張子をxlsにすると、winで無慈悲な警告メッセージが再び表示されてしまう。 ■パターン5 何のエラーも表示されなかったベストパターン。（拡張子詐称なのを除けば） ##私なりの結論 Macユーザーを無視出来るなら、UTF-16/BOM有りにするだけでもOK TAB区切りなのにcsv拡張子にするのが気持ち悪い＆許容できないなら、Macユーザには自力でセル表示してもらうように
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
ユニティちゃんのゲームをUnityを使わずにOpenGLで作る[1]：モデル表示してアニメーションまで - ラーメンは味噌汁
2014-06-21 ユニティちゃんのゲームをUnityを使わずにOpenGLで作る[1]：モデル表示してアニメーションまで OpenGL ES 3.0 iOS 7 ユニティちゃん ユニティちゃんでiOS用のゲームを作ってみます。 普通にUnity使ってもプログラマー的には面白く無いのでOpenGL ES 3.0を使ってガリガリ書いていきます。とりあえず今回はモデルを表示してアニメーションさせるまで。 ライセンス このアセットは、『ユニティちゃんライセンス』で提供されています。このアセットをご利用される場合は、『キャラクター利用のガイドライン』も併せてご確認ください。 プロジェクト https://github.com/ramemiso/ios_unitychan_es3公式さんにユニティちゃんライセンスに同意する形でなら公開しても問題ないと返答頂いたので、ライセンス表記とライセンスフ
![ユニティちゃんのゲームをUnityを使わずにOpenGLで作る[1]：モデル表示してアニメーションまで - ラーメンは味噌汁](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6754f1307a907b77f694f6f57b1c6b874910cf1/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fr%2Framemiso%2F20140621%2F20140621124226.png)
Create A Responsive Imagemap With SVG | thenewcode.com
Responsive Image maps are a crucial component of web design, as they allow for interactive images that can link to different pages or sections of a website. One popular way to create a responsive image map is through the use of SVG, or Scalable Vector Graphics. In this essay, we will discuss the process of creating a responsive image map with SVG, as well as the benefits of using this method. To b
Segment
Basic usage HTML Add the segment script (less than 2kb), and define a path somewhere. <script src="/dist/segment.min.js"></script> <svg> <path id="my-path" ...> </svg> JavaScript Initialize a new Segment with the path. Then draw a segment of stroke every time you want with: .draw(begin, end, duration, options). var myPath = document.getElementById("my-path"), segment = new Segment(myPath); segment
GitHub - drewwilson/atvImg
atvImg = 'AppleTV Image' Made by http://drewwilson.com This lightweight (2kb) plug-in will automatically turn your layered Apple TV PNGs into 3D parallax icons, the same way the new Apple TV treats app icons. You can have any number of AppleTV Images on your web page. No dependencies, this plugin is just plain ol' vanilla javascript. Works on all major browsers. It even supports touch and mobile.
iOS 9 Safari WebAudio::AudioBufferSourceNode does not play on first touchstart event. - Qiita
このエントリの末尾に重要な追記があります。この問題は iOS 9.3 β1 で fix しました。 iOS 8 Safari と iOS 9 Safari では WebAudio + touchstart において一部動作が異なっています。 iOS Safari の制限(おさらい) まずは、前提となる知識について軽くおさらいから。 ご存知のように、 iOS Safari における Media(Audio,Video)の再生には、以下の制限があります。 Audio や Video リソースの読み込み(load) や 再生(play)は、ユーザのインタラクションを起点としなければならない(パケ死対策) <audio src="mad.max.m4a" autoplay preload></audio> の autoplay や preload は無視され、自動で再生されません この制限は iO
Elastic Progress | Codrops
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax. Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it’s clicked, it animates into a fun little wire and a label that indicates the downl
低レベルなビット操作関数を集約した WebModule ベースのライブラリ Bit.js を追加 - latest log
結構な割合で必要となるビット演算系の関数をまとめた WebModule ベースのライブラリ Bit.js を追加しました。 こんな関数があります。 // make bit mask Bit.mask(2) // -> 0x03 Bit.mask(4) // -> 0x0f // bit split by bit-pattern Bit.split(0xffff1234, [16,4,4,4,4]) // -> [0xffff,0x1,0x2,0x3,0x4] // With ES6 Destructuring Assignment // ES6 Destructuring Assignment と Bit.split を併用すると以下のように簡便に記述できます var [u16, u8a, u8b] = Bit.split(0x00001234, [16, 8, 8]); // u16 =
Principles Of HTML5 Game Design — Smashing Magazine
In this article, Mikołaj Stolarski & Tomasz Grajewski would like to present a few ideas of how to implement different visual effects in Visual effects in games define their overall look and feel, and gameplay. Players are attracted to high visual quality, which generate more traffic and reach. It’s key for creating successful games and providing a lot of fun for players. In this article, we’d like
Physics
left click to create a point right click to select a point select multiple points to connect them hold down "d" and move mouse to drag Introduction A few years ago I wrote a little website called chubmarine.com. It was a physics simulation type thing, much like the one that's on this page. It's no longer active, but I thought it would be interesting to write about anyway. While it was cool to get
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
加速するフロントエンドとPWA
Cleave.js - Format input text content when you are typing
クリエイティブコーディングのための数学 JavaScript 入門 [三角関数と行列]![クリエイティブコーディングのための数学 JavaScript 入門 [三角関数と行列]](https://cdn-ak-scissors.b.st-hatena.com/image/square/628bc7eabd20d2482f0824937c2ff08619e98bb8/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fjavascript-160107112551-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/
Interactions for Draggable Elements | Demo 1
GitHub - Experience-Monks/math-as-code: a cheat-sheet for mathematical notation in code form
