Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

javascript/node.js

jQueryでtext()だのhtml()だのval()だので混乱してきたので整理

shuzo-kino.hateblo.jp の続きみたいな内容です。inputタグの値を変えるときはval()なのに、spanだとtext()。 タグごと書き換えたいときはhtml()なんてのまである!……こういうときは公式の説明に限ります。 .text() | jQuery API Documentation Get the comb…

HTMLタグのdata属性

HTMLタグのdata属性をつかうと、いろいろできます 特定のデータカラムをもった属性をもつ文字列に色を付けたい場合。 .red , [data-color="001"] {background-color:#ffead6;} <span data-color="@m.color">あか</span> 参考もと data-* - HTML | MDN HTML5 カスタムデータ属性「data-*」にJavaS…

jQueryのhtml()とtext()について

jQueryのhtml()とtext()について 実際のところ html()とtext()はデータの読み込み、書き込みを楽にできるやつです。 前者はタグを利用でき、後者は生テキストという違いがあります。書き込みをするときは $("#hoge").html("<li>something new</li>") 読み込み時は var…

BottleでjQueryのPOSTアクションをうけとる

クソ雑魚なのでjQueryは避けていたのですが…… 色々作るときに不便なのでやってみることにしました。 重いものを作る気はないので、Bottleと連携させます。 実際のところ 構成 $ tree . ├── app.py ├── static │ └── js │ └── client.js └── templates └── ba…

Leafletで距離計測をつける

サンプルはこちら 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>

CLIでOpenStreetMapの内容を表示できる謎アプリ"mapscii"

おためしで起動したいだけなら、以下のコマンドで。 $ telnet mapscii.me拡大は"a"、縮小は"z"。 十字キーで移動。 ローカルに導入 npm経由で導入できます。 $ npm install -g mapscii$ mapscii 参考もと github.com

デジタルアーカイブの世界的流れIIIFと、Leaflet.js拡張"Leaflet-IIIF"

Leaflet.jsのアドオンを漁っていたところ、IIIFなるもののアドオンが……なんじゃこれは? github.com 試しにデモをみてみると……なにこれは画像ライブラリ??? http://mejackreed.github.io/Leaflet-IIIF/examples/example.html 少し調べたところ、IIIFとは …

v-forで指定回数繰り返し処理

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>

v-modelは糖衣構文

Vue.jsで単にデータ・モデルを更新した場合、v-modelが使えます。 <input v-model="something"> これは、以下の内容の糖衣構文です。 <input v-bind:value="something" v-on:input="something = $event.target.value">何らかの理由でinputの内容を書き換えたいだけの場合…… たとえば、アラートを出す事もできます。 参考もと jp.vuejs.org

vm.$children[NUM]でVueコンポネントの内容を参照できる

shuzo-kino.hateblo.jp の続き。 コンポネントの要素を発火させる場合、vm.$children[NUM]とやってあげればよいです vm.$children[0].ReverseMessage() //undefined vm.$children[0].result //"as string"

Vueのイベントトリガをデバックコンソールで直接設定・発火させる

Vueのイベントトリガをデバックコンソールで直接設定・発火させる 実際のところ vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') //=> hi一回だけしか実行しないONCEというのもあります vm.$once('testOnce', function (msg) {…

gopherJs-vueでコンポネントをつかう

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…

v-forで要素にindexをつける

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アプリを作る その2:追記・確認が可能なTODOリストをつくってみる

「Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る」第二回として、 追記・確認が可能なTODOリストをつくってみました。 ……何? MarkDownエディタ? ……ちゃんとできたらアップロードします何卒何卒…… 実際のところ とりあえず、文字だけ並ぶやつ pack…

v-if属性を設定すると、表示の切り替えができる

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ファイルで呼ぶと……動かない

前回の記事が完全に止まった原因でもあります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>…

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る そのN:Vue公式のMarkDownエディタを実装してみる

結果的に、第二回はコチラになりました☆ shuzo-kino.hateblo.jp……フレームワークに習熟しないとVue公式のMarkdownエディタ実装はキツかったです。 どこかの段階で、実装できたら更新します 参考もと jp.vuejs.org GitHub - oskca/gopherjs-vue: VueJS bindin…

Gopher.jsとVue.jsを合わせてカンタンなWebアプリを作る その1:環境構築

Vue.jsはReactやAngularと比較される事も多いJavascriptフレームワークです。 とっても軽量で学習コストも先行するものに比べれば軽め。Gopher.jsはGo言語のスクリプトをJavascriptに変換する悪魔ライブラリ。これを組み合わせると……? 実際のところ 環境構…

PhantomJsで画像やらPDFやらがレンダリングされる場合

PhantomJsにて、バックヤードが自動生成でバイナリファイルを吐く場合 ……たとえば画像やPDFを吐く場合は、標準出力に書き出すという技があるようです。 ダウンロードせんともエエのですね……。 実際のところ アウトプットされた結果は ハッシュ値比較や特徴点…

PhantomJsで画面キャプチャ その2:ちゃんとViewportSizeを設定しよう

shuzo-kino.hateblo.jp の続きです。 ある程度縦長だったり横幅によってレイアウトの差が大きいページはちゃんとViewportSizeを設定しましょう 実際のところ var page = require('webpage').create(); page.viewportSize = { width: 1920, height: 1080 }; p…

phantomJsの画像読み込み切り替えオプション

phantomJsの画像読み込み切り替えオプション 実際のところ "load-images"を使います。 どこぞの莫迦のようにファイルの後にオプションを入れないようにしてくださいNE☆。 画像なし $ phantomjs --load-images=false phantomtest.js 画像あり $ phantomjs --l…

PhantomJsで画面キャプチャ

PhantomJsで画面キャプチャする方法です。 ……スクショで証拠残さないといけない場合にも有効ですね!(血走った目 実際のところ example.orgの画面キャプチャを取る場合、 以下のようなスクリプトでいけます var page = require('webpage').create(); page.o…

PhantomJSをnpm経由でOS Xに導入する

今日はヘッドレスなWebkit、PhantomJSをnpm経由でOS Xに導入する方法です。 ブラウザテストフレームワークに使われてたり、サイトのキャプチャなんかに使われてたりします。導入方法は公式からバイナリとってきたり、 あるいはbrewでやる方法もあるそうです…

leaflet-realtimeで「ピザ配達状況」めいたマップアプリをつくる

leaflet-realtimeは@perliedman氏が提供するleafletJsのサードパーティ拡張です。 サーバ上に置いたGeoJSONを呼び出して、「ピザ配達状況」めいたマップアプリをつくる事ができます。 実際のところ とりあえず、公式から持ってきましょう。 $ git clone http…

leaflet.jsでGeoJSONデータを扱う

shuzo-kino.hateblo.jp の続き。 ホントはコレをやりたかったのです。GeoJSONは地理データを記述する用JSON派生です。 特定の地点に吹き出し書いたり、国土領域をポリゴン埋めしたり、旅のルートを線で書いたりできます。 また、Githubに"geo.json"でUPする…

Leaflet.jsを使ってマップAPIを叩いてみる

Leaflet.jsは強力なマップAPI系ライブラリです。 OpenStreetMapのような有名ドコのちずにポップアップをつけたり、距離円を弾いたりできます。 更に、架空の地図……それも海図や宇宙図みたいなの……にもレンダリング可能。 色々面白そうな奴です。 実際のとこ…

郵便番号から住所を出してくれる便利ライブラリ「yubinbango.js」

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を使いリンクリストめいたものをだす

pugでmixinを使いリンクリストめいたものをだす方法です。 mixinはテンプレートみたいなもんです。 実際のところ Idで内部リンクするような事例の場合、 以下のような書き方でいけます。 mixin link-block .container .row .col-xs-12 a(href=arguments[0], …

gulpを入れたionicでserveした際に"WARN: No 'serve:before' gulp task found!"とかでたら

gulpを導入したionic環境でserveをやると、以下のようなエラーが出ることがあります。 WARN: No 'serve:before' gulp task found! If your app requires a build step, you may want to ensure it runs before serve.冷静にエラーを見ればわかりますが、serv…

ionic-datepickerを実装する

Ionicでカレンダー選択式のスゴイUIを提供してくれるionic-datepickerをionic1環境で使うための方法です。 Angular弱者の僕なので非常に苦戦しましたが、ようやく動いたのでメモ。 実際のところ Salesforce提供の雛形を、たたき台にしたプロジェクトでHogeと…