2年前にCSSのみで作った猫のアニメーションです。新しくなったWordPress5.0のエディタで書けるのか実験がてら。
このシリーズ作りたかったけど、もう2年も経つのかー。耳にマウスカーソルを当てるとぴこぴこするとか、そういうの作るのも楽しいです。
2年前にCSSのみで作った猫のアニメーションです。新しくなったWordPress5.0のエディタで書けるのか実験がてら。
このシリーズ作りたかったけど、もう2年も経つのかー。耳にマウスカーソルを当てるとぴこぴこするとか、そういうの作るのも楽しいです。
久しぶりの投稿で時代遅れのトピックを扱おうとしています、すいません。もしかしたら役立つ人もいるかと思い。
Facebookの右側に広告を表示する領域があるのですが、たまに下世話な芸能ニュースなど表示されていると、ワタシ嫌いではないので、ついついクリックしてしまうわけです。そして何度も「次へ」「次へ」とクリックしてどうでもいい情報をみせられ、中身のなさに愕然とするわけです。あまりに時間の無駄!でも目に入ってしまう以上、クリックしてしまいたい衝動にアガらえない!
という訳で、おもむろにCtrl+Shift+iで開発者コンソールをたちあげ、
1 |
$x('//*[@class="home_right_column"]').forEach((el)=>{el.textContent='何かの跡地';}); |
と入力して消していました。
一度入力すれば、上矢印カーソルを押すと入力履歴が呼び出されるので、ほとんど手間はありません。
しかし、Facebookではページ移動するたびに画面が書き換えられまた広告がでてきます。
そこでTampermonkeyでスクリプトを書きました。ユーザースクリプトはかなり昔からあるもはや古(いにしえ)の技術ですが、なんと私は初ユーザースクリプトです。たぶん、すでに誰かが作っていると思うんですが、まったく気にせずさくっと書けるかやってみました。
インストールの仕方は、まずここからChrome拡張機能のTempermonkeyをインストールします。
Chromeの拡張機能画面でTempermonkeyが有効になっていることを確認し、オプションをクリックするとTempermonkeyのダッシュボードが開くので、+ボタンを押し てユーザースクリプトを入力、保存してください。
以下がスクリプト。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ==UserScript== // @name Facebook // @namespace https://www.facebook.com/ // @version 0.1 // @description try to take over the world! // @author Kazuya Utsunomiya // @match https://www.facebook.com/* // @grant none /* load jQuery */ // @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js // ==/UserScript== (function() { 'use strict'; const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { $('.home_right_column').hide(); }); }); const config = { attributes: true, childList: true, characterData: true }; observer.observe($('body').get(0), config); })(); |
これだけで、メタタグの@match属性から該当するfacebookのURLを開いた時点でユーザースクリプトが発動し、DOMを監視して変更があれば広告の入っているhome_right_columnクラスの領域を非表示にします。
一瞬広告が表示されますが、自動的にFacebookから広告が消えます。
最近、cakePHP3を使っています。
しばらくfuelPHPとか、あと名前も忘れましたがいくつかPHPフレームワーク使っていました。
しかしcakePHPの規約たくさん、でも覚えてしまえば分かりやすいぬるめのお湯的な感覚が忘れがたく、PHP5.2を捨ててクラスのauto loadとチェインによるSQL生成さえ対応してくれればいつでも戻ってくるつもりでした。そしたら、いつの間にかcakePHP3になってそれらも実装されているし、いろいろ変わっているではありませんか。
しばらく使ってみた感想は、正統な進化で慣れてくるとやはり使いやすいです。しかし、ドキュメントの劣化がひどいです。かなり公式が分かりづらいです・・・。
さて、今日はbakeで自動生成されるView画面のリンク名を日本語に翻訳していく時の簡単なテクニックです。
↓画像のように日本語化したいと思います。
1 |
$ bin/cake bake all textures --prefix admin |
1 |
<li><?= $this->Html->link(__('List Textures'), ['action' => 'index']) ?></li> |
1 2 |
msgid "List Textures" msgstr "画像一覧" |
1 |
<li><?= $this->Html->link(__(__('List {0}'), __('Textures')), ['action' => 'index']) ?></li> |
1 2 |
msgid "List {0}" msgstr "{0}一覧" |
1 2 |
msgid "Textures" msgstr "画像" |
1 2 |
検索:__\('List ([^']+)'\) 置換:__(__('List {0}'), __('$1')) |
SVGのアニメーションの検証。IEでは動かないみたい。JavaScriptでアニメーション作るのがやっぱり一番なのかな。jQueryでのアニメーションは自分でライブラリも作って、ゲームの仕事で使ったことあるので得意ですよ。
See the Pen SVG Sparrow by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.
雀は最初はCODEPENで描き始めましたがやっぱりパスの編集がつらすぎ。おとなしくBoxySVGを使って描きました。アニメーションはコードで制御するしかない。SVGにはSMILが組み込まれていて、これでアニメーションができるのですが、他にもCSSやJavaScriptでもアニメーション制御できます。とりあえずSMILの書き方でやってみました。
すごいアニメーションをCODEPENで発見
See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.
これ、なんとCSSだけで出来ています。これは完全に変態の域。でもIE Egdeでみると最初は問題ないですが次第に壊れていくみたい。
アニメーションはブラウザ・機種による違いがけっこうあって、厳密に同じ見え方にするのは難しい。Flash使うのがいいですよ。てか、最初のアニメーション設計にやっぱり欲しいですな。フリーで匹敵するものがあればいいのですが。
こんにちわ。今日はクリスマスイブということで、クリスマスぽい背景をつくって見ました。
See the Pen wobJpy by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.
まず雪の結晶をCODEPENで描いていきます。こういう幾何学的ぽい図形は、ツールを使えばコピーしながら少しづつ反転、回転させていけばいいので割と楽なのですが、点を一つづつ数値入力するとなると地獄です。左右対称にするだけで、前の線の点から計算しながらひいていくわけで、すっかり心折れて諦めました。
割とシンプルそうなSVG専用の図形ツールであるBoxySVGをインストールして結晶を描きました。
ツールから保存したSVGファイルをテキストエディタで開き、background-imageにdata:image/svg+xml,の後に続けて流し込みます。改行があるとエラーになるので削除、またダブルクォートはCSSで使っているのでシングルクォートに変換しました。
1 |
background-image:url("data:image/svg+xml,<svg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'><path d='M 80.41 66.991 L 85.669 63.641 L 90.941 66.991 L 90.941 72.408 L 85.984 75.368 L 80.643 72.483 L 80.41 66.991 Z' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 219.547 266.713' style='fill: none; stroke: black;'/><g transform='matrix(1, 0, 0, 1, -122.723381, -204.176941)'><path d='M 208.399 267.438 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g><path d='M 190.481 243.84' style='fill: none; stroke: black;'/><g transform='matrix(-1.000001, 0, 0, -1.000001, 294.753723, 342.839111)'><path d='M 208.953 268.177 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g><g transform='matrix(1, 0, 0, 1, -122.723381, -204.176941)'><g transform='matrix(-0.440226, -0.897887, 0.897887, -0.440226, 54.850155, 581.916077)'><path d='M 208.836 267.791 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g><g transform='matrix(0.440226, 0.897888, -0.897888, 0.440226, 362.224518, -33.741871)'><path d='M 208.303 267.341 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g><g transform='matrix(0.469852, -0.882745, 0.882745, 0.469852, -131.356094, 329.900116)'><path d='M 209.119 267.702 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g><g transform='matrix(-0.469853, 0.882746, -0.882746, -0.469853, 547.67218, 218.390656)'><path d='M 208.582 267.413 L 208.399 227.137' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 202.494 232.018 L 208.214 236.404 L 214.507 232.209' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/><path d='M 196.773 239.645 L 208.214 247.463 L 220.99 239.645' style='fill: none; stroke: white; stroke-width: 4; stroke-linecap: round;'/></g></g></svg>"); |
スクロールする雪の背景を2つ重ねて、奥ゆきをだすようにしました。
3〜4個の雪をばらした画像にしておけば縦横整列しているように見えなくて良いのですが、結晶を描くのに時間をかけすぎたので少しの手間を惜しみたい気分です。なんとなくそういうデザインだと思い込ませる作戦にします。
CSS3の背景グラデーションで画面に赤と緑の領域を作ります。
1 2 3 4 5 6 7 8 |
html{ height:100%; background-size:100% 100%; background-image: linear-gradient(50deg, red 40%, transparent 40%), linear-gradient(120deg, white, gray 50%, DarkGreen 50%) ; } |
文字はgoogle fontからフォントを選んできました。
といったところで今日はおしまい。
今年も残りわずかとなりました。皆様いかがお過ごしでしょうか。
私は今年一年を振り返ってみますと、長くパソコンの前におりますと徐々に脈が少なくなってきて最後には気絶してしまうという、もう体が仕事を拒絶すること著しい変な持病が増えてしまいましてだいぶ仕事をセーブして、ゆるめなスケジュールで山に海にと旅行とかもかなり楽しみました。齢40を越えますとやはり片腕をくれてやるくらいでないと仕事が務まらなくなってきているなと感じます。
今ではすっかり良くなりましたが、ちょっと遊びすぎで気持ちも緩んだままです。伸びきったゴムになってしまいそうです。とっとと3Dだとかアニメーションの勉強も復活させたいなと思っている次第です。
最近、youtubeをかけながらslither.ioを遊ぶことがあるのですが、ボンジュール鈴木がフレンチポップ好きな私の直球ど真ん中で素晴らしいです。
ボンジュール鈴木はアニメのOP曲などよく手がけているようで、そのうちのひとつ、ユリ熊嵐のサイトを開いてみますと、背景がスクロールしておりまして、昔作ったサイトとかプレイステーションのレースゲームを思い出して懐かしい気がしました。
このサイトではJavaScriptでスクロールさせているようです。私も昔はJavaScriptを使っていたのですが、今回は他の方法を試してみます。
See the Pen BQMyMX by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.
これはCSS3のtranslate3dを使っています。画像はpatternifyで作りました。今回初めてCODEPENを使ったのですが、CODEPENでは画像ファイルのアップロードができないので、埋め込み画像を使うというのは良い手だと思います。
PNG画像をSVG画像に変えてみます。ニコちゃんマークをCODEPENで描いてみました。
See the Pen KNYzGg by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.
うまくできました。
SVGについて調べてみると、画像ソフトも真っ青なすごい機能が、人間が理解可能なコードに変換されていてすごく面白いです。CODEPENでは入力してすぐに反映されるので、CODEPENを使って絵を描くのは面白いかもしれません。
下にCODEPENでSVGコードを直に数値入力して絵を描くという練習をしたものを置いておきます。画像編集ソフトは使っていません。CODEPENのみです。ええ。やはり絵が大きくなってくるとグラデーションの変更とかにいちいち入力画面をスクロールして該当箇所を探さないといけないので辛いものがあります。やはり画像編集ソフトは偉大です。
See the Pen xRBKMQ by kazuya utsunomiya (@kazuya_utsunomiya) on CodePen.
とはいえ、ちょっとしたシルエットアイコンなどを作成するときにいちいち画像編集ソフトを立ち上げるのは時間がもったいないので、これから少しSVGとCODEPENを組み合わせたアイコン作成に取り組んでみたいと思います。
ポケGOは劣化イングレスとも言われるほどシンプルで分かりやすい気がしますが、ポケGOとイングレスとの大きな違いは、イングレスではポータルと呼ばれる審査を通った現実の史跡ポイントを中心にゲームが展開するのに対して、ポケットGOでは歩いている途中でポケモンが突然出現することではないでしょうか。
交差点の真ん中など、危ない場所にポケモンが現れると人が立ち止まってしまい邪魔になってしまいます。細かく人の手で設定しているはずもなく、何らかのルールでポケモン出現箇所が決まっているはずです。いや、決まっているとうれしい。
どういった基準でポケットモンスター出現位置を決めているのか、もしくは決めることができるのでしょう。
ポケモン出現ルールの予想
アメリカでは軍事基地や原子力発電所など、危険な場所にポケモン探しのために無断侵入しようとして問題になっています。このニュースは、人のいかない場所にレアなポケモンがいるという誤った印象を与えてしまうのではないかと心配しました。
実際には、攻略サイトなどで新宿御苑など都心の公園がポケモンの巣として紹介され、誰かがレアポケモンをみつけたとネットで広がるとたくさんの人が集まっていたようでした。
おそらくですが、イングレスのXM(エキゾチックマター)の出現箇所と同じロジックでしょう。XMは、googleが集めているGPS情報をもとに点を示したもので、人が滞留している箇所ほどXMも多く存在します。
イングレスが始まった当初、googleの社内ベンチャーであるNIANTICはgoogleにGPS情報を送信することを許可したAndroid端末のデータしかとれていませんでした。その後イングレスにより膨大なGPS追跡情報が集まり、このビッグデータ解析数m間隔で人が足早に通り過ぎる空間と、滞留しやすい空間を取得可能になったと考えられます。
ポケGOではこのイングレスによってマッピングされた地図情報をもとに、1.人が多く滞留しやすく 2.屋外で 3.NIANTECで設定する特定箇所を除く 箇所にポケモンが出現するのではないかと思いました。
公園がポケモンの巣と呼ばれるのは、私が思うに単に条件を満たし、かつ人が多いので確率が高くなっているためだと思います。ポケモンには平地で出現しやすいとか水辺で出現しやすいとかあるようですが、どうもこのあたりのロジックはうまく動いているように思えず、特定の公園に人が集まるのは都市伝説の類ではと思っています。一等賞のでやすい宝くじ売り場と同じで、確率的にはどこで買っても同じはず、条件さえ満たしていれば良いのでレアポケモンは出現する範囲は広いはずです。(今後展開される企業タイアップなどのレアポケモンは除く)
実証実験、誰も行かない場所でポケモンを探してみる
イングレスの時も、地元ではXMを集めることができないので1時間かけて街まで行き、そこで遊んでいたものでした。人のいない山間部はまったく無意味でした。
ポケGOではXMが表示されていませんが説が正しければやはり人の行かない山間部は無意味なはずです。山に入ってポケモンを探してみます。
農道です。この辺はお百姓さんがいるのでイングレスでみてもわずかにXMが存在します。周囲にいるポケモンはポッポだけでした。
結局ポッポはみつけられず。ここから森に入ります。ここは30年ほど前に減反政策で耕作放棄した我が家の畑です。誰も立ち入っていません。
中に入るなりポッポも消えました。木が生い茂っているおかげで下草は生えておらず、葉がしきつめられているのでこれで滑ったりしなければマダニに噛みつかれなくて済みそうです。周囲はイノシシ除けの柵に囲まれており、進めなくなりました。道を見失い、1時間ほどイバラの棘と格闘しながら降りました。この間、周囲にポケモンまったく見つからず。
結局2時間で4キロほど歩きましたが、1匹もポケモンゲットできませんでした。
やはり人の立ち入らない場所はポケモンは出現しないようです。
都会を遊ぶポケGO、田舎では広まらず
私は人のいないところで遊ぶのが好きなので、イングレスもあまり合わなかったのですがポケGOも同じく市街地に立ち寄れる人ほど有利であり、人の集まる場所にさらに人を集める構造になっています。
安全性など考えると、おそらくこれが一番手間のかからないやり方なのでしょうが、リアルにソーシャル能力が高いほど楽しめるわけですからぼっちゲー愛好家としてはちょっときついですね。
しかし一つ気付いたことがありました。それは、ポケモンは一つもみつかりませんでしたが、リアルに昆虫とかトカゲとかたくさん見つけたことです。
考えてみればポケモンは昆虫採集とかで遊べない子のための代替ゲーム。田舎の子にはそもそも広まらないのかもしれません。
mysqlがやたら重くなっていて、テーブル表示とかは問題ないのに普通のSELECTでも30秒くらいかかるようになっていました。
ビューテーブルとか使いまくっていたので最初そのせいかと思って調査を始めたのですがEXPLAINですら相当重い・・・。
1 |
mysql> SHOW PROCESSLIST; |
をすると、大量にSELECTやらUPDATEやらがLOCK状態になっていました。こういうこともあるんですね。15年ほど使ってて初めて。
1 2 3 4 5 6 7 8 9 |
mysql> SELECT GROUP_CONCAT(id) FROM information_schema.PROCESSLIST WHERE TIME > 10; +-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | GROUP_CONCAT(id) | +-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | 489757,489681,489654,489613,489552,489472,489395,489251,489169,489056,488965,488874,488804,488731,488641,488547,488456,488377,488322,488232,488138,488076,487985,487908,487842,487776,487718,487651 | +-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ 1 row in set (0.33 sec) mysql> exit; $ mysqladmin kill 489757,489681,489654,489613,489552,489472,489395,489251,489169,489056,488965,488874,488804,488731,488641,488547,488456,488377,488322,488232,488138,488076,487985,487908,487842,487776,487718,487651 -u root |
でなんとかなりました。
以下のブログが大変参考になりました。
[blogcard url=”http://d.hatena.ne.jp/takami_hiroki/20101027/p1″]
[blogcard url=”http://tech.basicinc.jp/MySQL/2014/04/06/mysql_processlist_kill/”]
ORMモデルの中で
1 2 3 4 5 6 7 8 9 10 |
protected static $_observers = array( 'Orm\Observer_CreatedAt' => array( 'events' => array('before_insert'), 'mysql_timestamp' => false, ), 'Orm\Observer_UpdatedAt' => array( 'events' => array('before_save'), 'mysql_timestamp' => false, ), ); |
という設定をして追加日、更新日を自動設定していることが多いと思いますが、これだと追加日(created_at)を特定の日にしようとしても自動的に追加の日になってしまいます。
あるコントローラーの中だけobserverを解除して日時を指定したい場合は次のようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Controller_Test extends Controller_Template { public function action_test(){ $discovery = \Model_Discovery::forge(array( 'user_id' => 1, 'cache_id' => 1, 'created_at' => strtotime('2016-01-17 07:00:00') )); //var_dump($discovery->observers()); // observer一覧を表示 $discovery->unregister_observer('Orm\Observer_CreatedAt'); // observerの削除 //var_dump($discovery->observers()); // observerが削除されていることの確認 $discovery->save(); } } |
またちょこちょことゲームを作ります。
できるだけ完成に近いところまでやりたいので、できるだけカジュアルなものを、ということでJavaScriptでサクッと作ることにしました。といってもフルスクラッチも大変なのでenchantjsを使うことに。
調べてみるとenchantjsの話題って2011年と2012年に集中していて、それからはあまり聞かれなくなってますね。HTML5でゲームを作るというのは一時的な注目だったのか、それからパズドラのようなネイティブアプリ、インディーズではunityが注目を集めていたわけですが、PCでは今でもFlashが主流、スマホはネイティブという状況で硬直しつつある気がします。もう時流を読むのも疲れたので、あえて再びHTML5です。前にDOMだと結構楽しく作れたので今度canvasを使ったものを本格的に作ってみたかったので。
テーマは、治水です。
川を見るとよく文明のない時代にどう流れていたか想像してしまうのですが、どんどん想像が膨らんで、龍神伝説の真相を考えずにはいられません。農耕が始まった時、田畑を広げるために川を征服したいと人々が考えるようになりそのために使役を出し合う共同体、つまり「国」の起源になったのだと個人的に考えます。竜を征服したものが王となり、八岐大蛇しかり、竜退治の伝説が残っていったのだと思うと現代の川工事を見ていても胸に熱いものがこみ上げてきます。これをゲームにできないか、と。
とりあえず土を積み重ねてみました。土ブロックの表示順の管理が難しいです。マップを全部描き直すのも大変だし、いい方法がないか探しています。
一番重要な、水の表現もこれからです。これもやはり表示順が問題で、ここを突破できるかが最初の難関ですね。
今回GitHubを使いこなしたいということもあるのでソースはGitHubにおいています。