👆
引越し先はこちらです！
どうしても404ページでNOT FOUNDを流したかったので、近所のサーバサイドエンジニアに頼み込んで設定方法を教えてもらいました。
/etc/nginx/conf.d/ 以下に hogehoge.conf という設定ファイルをつくり、
server {
...
error_page 404 /404.html;
...
}という感じでエラーページを指定すればOKです。
僕の環境の場合、404.htmlを用意した場所がrootの外だったので、
server {
...
error_page 404 /../404.html;
...
}という感じで指定する必要がありました。
無事に404ページでNOT FOUNDが流せるようになったので良かったです。感謝。
こんな感じのことができるツイートボタンをつくりました。
こどもの頃、FF6で連続魔が使えるようになったとき、最強じゃないかと思いました。
https://itunes.apple.com/jp/app/final-fantasy-vi/id719401542?mt=8&uo=4&at=10l16903
クロノトリガーで2人技が使えるようになったとき、すごい概念だと思いました。
ドラゴンボールの単行本の背表紙が1枚の絵になっているのを見たとき、かっこいいなぁと思いました。
[asin:B071WRSJS3:detail]
（期間限定で1巻が無料だ！）
そんな思い出を元に（？）、連続押下でツイートを連投すると、1つのイラストが完成するツイートボタンをつくってみました。
See the Pen DoubleTweetButton by kimmy (@kimmy) on CodePen.
ボタンを押す度にバッジの数が減っていきます。
順番に投稿すると、
こんな感じのタイムラインが完成します。
（3回目の投稿でようやくURLがシェアされます）
OAuth認証なしで画像をシェアしてもらうために、 こちらの手法 をつかっています。
事前にツイートを用意しておけば、なにも難しいことはないのですが、2回連続で謎のURLをシェアさせられるのでちょっと怖いですね。。。
この原理をうまくつかえば、いつもより2倍ツイートされるウェブサイトをつくれるかもしれません。＾ ＾
Facebookでも同じようなことができそうなので、機会があったらつくってみたいです。
いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、
ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。
ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。
// tickerをつくる const ticker = new PIXI.ticker.Ticker(); // rendererをつくる（WebGLがつかえたらWebGLをつかう） const renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); // stageをつくる const stage = new PIXI.Container(); // 真っ赤なtextureをつくる const texture = new PIXI.Texture.fromImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVQIW2NgAAAAAgABYkBPaAAAAABJRU5ErkJggg=="); // spriteをつくる const sprite = new PIXI.Sprite(texture); const V = .1; // スピード const L = 180; // 振幅 let diffX = 0; let index = 0; let x, y; sprite.width = 80; sprite.height = 80; // 中心に配置 x = (window.innerWidth - sprite.width) / 2; y = (window.innerHeight - sprite.height) / 2; // Canvasを配置 document.body.appendChild(renderer.view); // stageにspriteを配置 stage.addChild(sprite); ticker.add(function(delta) { ++ index; diffX = Math.sin(index * V) * L; // tickerが進む度にspriteの座標を更新 sprite.position = new PIXI.Point(x + diffX, y); renderer.render(stage); }); // tickerをスタート ticker.start();
