javascript
nodejsを書いていて、mapだのlistめいた挙動をやりたい……と何となく感じていましたが、世のなか同じ発想の人は多かったようです underscore.jsはEnumbleなデータをガリガリ弄るのに適したライブラリです。 実際のところ ライブラリを読んで使うわけですが、"…
javascriptが分からな過ぎて、多分またググるので自分用にメモを残して置く。 実際のところ <html> <head> <title>Hello World</title> </head> <body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <p id="sample">Hello World!</p> <button id="btnA" >Push Me</button> <script type="text/javascript"> const btnA = document.getEl…</body></html>
p5.jsはprosessingのチームが協力して作っている、ProcessingのJS移植です。 一部関数の取り扱いが違いますが、概ねProcessingと同じ感じで開発ができます。 実際のところ 公式のWEBエディタを用いてProcessingのサンプル Storing Inputを動かしてみます。p5…
shuzo-kino.hateblo.jp の続きみたいな内容です。inputタグの値を変えるときはval()なのに、spanだとtext()。 タグごと書き換えたいときはhtml()なんてのまである！……こういうときは公式の説明に限ります。 .text() | jQuery API Documentation Get the comb…
HTMLタグのdata属性をつかうと、いろいろできます 特定のデータカラムをもった属性をもつ文字列に色を付けたい場合。 .red , [data-color="001"] {background-color:#ffead6;} <span data-color="@m.color">あか</span> 参考もと data-* - HTML | MDN HTML5 カスタムデータ属性「data-*」にJavaS…
jQueryのhtml()とtext()について 実際のところ html()とtext()はデータの読み込み、書き込みを楽にできるやつです。 前者はタグを利用でき、後者は生テキストという違いがあります。書き込みをするときは $("#hoge").html("<li>something new</li>") 読み込み時は var…
クソ雑魚なのでjQueryは避けていたのですが…… 色々作るときに不便なのでやってみることにしました。 重いものを作る気はないので、Bottleと連携させます。 実際のところ 構成 $ tree . ├── app.py ├── static │ └── js │ └── client.js └── templates └── ba…
サンプルはこちら Ruler Demo <html lang="en"> <head> <meta charset="UTF-8"> <title>Ruler Demo</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <link rel="stylesheet" href="../src/leaflet-ruler.css" /> </link></link></meta></head></html>
Leaflet.jsのアドオンを漁っていたところ、IIIFなるもののアドオンが……なんじゃこれは？ github.com 試しにデモをみてみると……なにこれは画像ライブラリ？？？ http://mejackreed.github.io/Leaflet-IIIF/examples/example.html 少し調べたところ、IIIFとは …
shuzo-kino.hateblo.jp 上記の記事ではデータの回数分だけ回してました。 今回は、v-forで指定回数繰り返し処理をする場合について。 実際のところ <html> <body> <div id="app"> <ul v-for="i in 10"> <li v-bind:id="'list'- + i"> <span> {{ i }} <my-el></my-el> </li> </ul> </div> <div> </div> <script type="text/javascript" src="basic.js"></script> </body></html>
Vue.jsで単にデータ・モデルを更新した場合、v-modelが使えます。 <input v-model="something"> これは、以下の内容の糖衣構文です。 <input v-bind:value="something" v-on:input="something = $event.target.value">何らかの理由でinputの内容を書き換えたいだけの場合…… たとえば、アラートを出す事もできます。 参考もと jp.vuejs.org
shuzo-kino.hateblo.jp の続き。 コンポネントの要素を発火させる場合、vm.$children[NUM]とやってあげればよいです vm.$children[0].ReverseMessage() //undefined vm.$children[0].result //"as string"
Vueのイベントトリガをデバックコンソールで直接設定・発火させる 実際のところ vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') //=> hi一回だけしか実行しないONCEというのもあります vm.$once('testOnce', function (msg) {…
gopherJs-vueでコンポネントを活用刷る場合、NewComponentをつかいます 実際のところ <html> <body> <div id="app"> <my-el></my-el> </div> <script type="text/javascript" src="basic.js"></script> </body> </html> package main import ( "github.com/gopherjs/gopherjs/js" "github.com/oskca/gopherjs-vue" ) type Model struct…
vue.js話。 Rubyと同様、インデックスつきのfor文を記述できます。 実際のところ 前の記事でやった内容に インデックスをつける例を考えます。 v-for構文の中に"index" <div> <ul v-for="(book, index) in bookdatas"> <li>ID{{ index }} :: {{book.title}} - {{book.content}}</li> </ul> <button v-on:click="AddNewBook">Add New Book</button> </div> 参考もと jp.vu…
「Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る」第二回として、 追記・確認が可能なTODOリストをつくってみました。 ……何？ MarkDownエディタ？ ……ちゃんとできたらアップロードします何卒何卒…… 実際のところ とりあえず、文字だけ並ぶやつ pack…
v-if属性を設定すると、表示の切り替えができます 実際のところ gopher.jsのサンプルは以下の通り <html> <body> <div id="app" v-cloak> <div>str: {{ result }} </div> <span v-bind:title="result" v-if="flag"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> <div> <button v-on:click="Button">Bu…</button></div></div></body></html>
前回の記事が完全に止まった原因でもありますgopherjs-vueで作ってない関数をhtmlファイルで呼ぶと……動かないです。 実際のところ たとえば、以下のコードは実装してない関数を入れてないので動きません <html> <body> <div id="app" v-cloak> <div>integer: {{ integer }} <input v-model="integer"></input> </div> <div>str: {{ str }} </div> <button v-on:click="Inc">Incre</button>…
結果的に、第二回はコチラになりました☆ shuzo-kino.hateblo.jp……フレームワークに習熟しないとVue公式のMarkdownエディタ実装はキツかったです。 どこかの段階で、実装できたら更新します 参考もと jp.vuejs.org GitHub - oskca/gopherjs-vue: VueJS bindin…
Vue.jsはReactやAngularと比較される事も多いJavascriptフレームワークです。 とっても軽量で学習コストも先行するものに比べれば軽め。Gopher.jsはGo言語のスクリプトをJavascriptに変換する悪魔ライブラリ。これを組み合わせると……？ 実際のところ 環境構…
PhantomJsにて、バックヤードが自動生成でバイナリファイルを吐く場合 ……たとえば画像やPDFを吐く場合は、標準出力に書き出すという技があるようです。 ダウンロードせんともエエのですね……。 実際のところ アウトプットされた結果は ハッシュ値比較や特徴点…
shuzo-kino.hateblo.jp の続きです。 ある程度縦長だったり横幅によってレイアウトの差が大きいページはちゃんとViewportSizeを設定しましょう 実際のところ var page = require('webpage').create(); page.viewportSize = { width: 1920, height: 1080 }; p…
phantomJsの画像読み込み切り替えオプション 実際のところ "load-images"を使います。 どこぞの莫迦のようにファイルの後にオプションを入れないようにしてくださいNE☆。 画像なし $ phantomjs --load-images=false phantomtest.js 画像あり $ phantomjs --l…
PhantomJsで画面キャプチャする方法です。 ……スクショで証拠残さないといけない場合にも有効ですね！（血走った目 実際のところ example.orgの画面キャプチャを取る場合、 以下のようなスクリプトでいけます var page = require('webpage').create(); page.o…
今日はヘッドレスなWebkit、PhantomJSをnpm経由でOS Xに導入する方法です。 ブラウザテストフレームワークに使われてたり、サイトのキャプチャなんかに使われてたりします。導入方法は公式からバイナリとってきたり、 あるいはbrewでやる方法もあるそうです…
leaflet-realtimeは@perliedman氏が提供するleafletJsのサードパーティ拡張です。 サーバ上に置いたGeoJSONを呼び出して、「ピザ配達状況」めいたマップアプリをつくる事ができます。 実際のところ とりあえず、公式から持ってきましょう。 $ git clone http…
shuzo-kino.hateblo.jp の続き。 ホントはコレをやりたかったのです。GeoJSONは地理データを記述する用JSON派生です。 特定の地点に吹き出し書いたり、国土領域をポリゴン埋めしたり、旅のルートを線で書いたりできます。 また、Githubに"geo.json"でUPする…
Leaflet.jsは強力なマップAPI系ライブラリです。 OpenStreetMapのような有名ドコのちずにポップアップをつけたり、距離円を弾いたりできます。 更に、架空の地図……それも海図や宇宙図みたいなの……にもレンダリング可能。 色々面白そうな奴です。 実際のとこ…
yubinbango.jsは郵便番号から住所を出してくれる便利ライブラリです。 npmみたいなツールが無くとも、そのまんま埋め込みができます。 実際のところ <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <form class="h-adr"> <span class="p-country-name" style="display:none;">Japan</span> 〒</form>
pugでmixinを使いリンクリストめいたものをだす方法です。 mixinはテンプレートみたいなもんです。 実際のところ Idで内部リンクするような事例の場合、 以下のような書き方でいけます。 mixin link-block .container .row .col-xs-12 a(href=arguments[0], …
