もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

Javascript

Vue+VuetifyでVueI18nを使ってみた

はじめに ここ最近は、個人的な勉強でVue.js+Vuetifyを使うことが多い Vue.js楽しい Androidアプリの作成やらSpringBoot + Thymeleafを使ってきた影響で、外部ファイルに文字列を定義するクセがついた いわゆるi18n対応 Vue.js+Vuetifyでi18n対応するために…

【Javascript】select要素の開いた/閉じたイベントを実装した話

はじめに 前回の記事の続き monakaice88.hatenablog.com 前回の話は、セレクトボックスを選択した時(値が決まった時)にモーダルを表示するという機能を作成したけれども、 onchangeイベントを使っていたため、同じ値を選択したときにモーダルが表示されな…

【Javascript】ある要素のすべてのイベントの発生タイミングを調べる

経緯 セレクトボックスを選択した時(値が決まった時)にモーダルを表示するという機能を作成した この時、セレクトボックスのonchangeイベントに関数を登録し、内部で値をチェック後、モーダルを表示する動きをしていた この時の問題点は、同じ値を選択した…

AngularJSで半角数値しか入力出来ないディレクティブを作ってみた

WEBアプリのバリデーション処理はめんどくさい とある業務系のアプリを作成していて、 数値を入力してもらう箇所に普通の文字列を入れられ挙動がおかしくなることがあった それぐらいバリデーション入れろよ・・・とツッコミが聞こえそうだけど、仕様が変わ…

Apacheでcss・js等除くAjaxのみキャッシュを無効にする

とあるWEBアプリでAjax周りで不具合が出た 調べてみるとよくあるIEだけの現象 Chrome、Firefoxでは問題ないが、IEだけAjaxのキャッシュが使われ、データが古いまま GETクエリに時刻文字列のようなユニークキーを追加したり、Angularの設定で「If-Modified-Si…

IE開発者ツールのconsoleの罠(IE8、IE9)

今更書くような記事でもないし、何番煎じだよって思われるかもしれない Javascriptをガリガリ使用するWEBアプリケーションを作っていて、「IE8で動かないんだけど・・・」と問い合わせが IE8の実機がないため、IE11の開発者ツールでIE8をエミュレートして現…

とりあえず超簡単にElectronを使ってみた

Electronとは HTML5とNode.jsでWindows、Linux、Macのデスクトップアプリを作れる クロスプラットフォーム実行環境。 もともと、テキストエディタのAtomを開発するための実行環境らしい。 ↓Electron本家 electron.atom.io ↓Electronについて参考になるサイト…

(Openlayers2)Labelの表示・非表示を実装する。

今回も私大好きOpenLayersの話 今回は描画したVectorのラベルを表示したり、非表示にしたりする方法について Vectorのラベルを表示する方法は公式のサンプルを参照すると分かりやすいと思う。 ↓OpenLayersでラベルを表示するサンプル OpenLayers Labeled Fea…

【OpenLayers2】地図の縮尺(ズーム)でマーカサイズを動的に変更する

OpenLayersをそのまま使った場合、マーカサイズが変わらない。 日本全体が見える縮尺にしても、最大に拡大しても、描画されるアイコン・ベクターのサイズは同じ そのためマーカサイズ地図の縮尺でアイコンサイズを動的に変えようとするのは、あるあるパター…

OpenLayers2でGoogleMapをちゃんと表示する。(3度目の正直)

またまた OpenLayers & GoogleMap ネタ 最近(といってもそろそろ1年経ちそう)触り始めたOpenLayersで、去年ハマった問題を書いた。 問題とは、OpenLayers を使って GoogleMap が表示できないこと。 もう少し厳密に言うと、OpenLayersのクラス「OpenLayers.L…

AngularJSとAngularStrapでテキストボックスに数値しか入力できないようにする

少し前に似たようなことをやった monakaice88.hatenablog.com ただフォーマットが合っていない時だけメッセージを表示するだけだった 個人的にはそもそも数値しか入力できないようにしたい! というわけで、Javascriptのサンプルを調べつつ、AngularJSとAngu…

ngRepeatFinishedが動かなかったので修正した話(AngularJS)

DOM操作の都合上、AngularJSのループ処理のngRepeatのレンダリングが終わった時の イベントが拾いたい時が結構ある。 そこでよく見る解決策が、「onFinishRender」やら「ngRepeatFinished」という言葉 色んな所で(StackOverflowとか、海外のブログとか)で…

IEでテキストをinput[text]・textareaにDragDropした時、ng-modelが更新されない

AngularJSを使った開発で、FireFox、Chromeでは問題なく動作して、いつものごとくIE11で動作しなかった現象が発生 やりたいことは、テキストボックス(またはテキストエリア)の文字数のカウントを取りたいだけ 特に複雑なコードではなく、$scope.$watchでng…

AngularJSとAngularStrapでバリデーションメッセージを表示

古いIEの仕様に苦しむもなかアイスです。 input要素にrequired属性やらpattern属性はすごい便利だなーと思っていたら IE8,9で使えない・・・ IE8,9に合わせて、input要素のidやらclassで場合分けしてエラーメッセージを アラートダイアログで表示するのは最…

OpenLayers(2.13.1) で GoogleMapが表示されない

以前にも似たような不具合にあったのですが、その時はAPIのバージョンを「3.20」に設定したら解決しました。 monakaice88.hatenablog.com これでめでたしと思っていたら、また表示されなくなった・・・ 他のベースレイヤは表示される(OpenStreetMapとか) …

OpenLayers + AngularJSでdirectiveを使ったら捗った

AngularJSを使い始めて6ヶ月・・・ やっと使い方がわかって気がする あとJavascriptのいわゆる「MV*」も いや、わかっていないな~ わかったことは、とにかくcontrollerはイベント処理に徹底しよう!というぐらい OpenLayers(2.13.1) + AngularJS を使ったW…

OpenLayers(2.13.1)のOpenStreetMapがIE11で遅い件

OpenLayersの便利さ・IFのわかりやすさに感動しているもなかアイスです。 OpenLayers(2.13.1)でアプリをGoogleChromeで作っていて、たまたまIE11で動作確認してみると すごく遅い・・・ どれぐらい遅いかは計測してなかったけど、同時に使っていたAngularJ…

Google Maps API の不具合?

OpenLayers(2.13.1)を利用して、GoogleMapやOpenStreetMapの地図を表示するWEBアプリを作っているのですが OpenStreetMapは表示できて、GoogleMapが表示できない現象が発生。 GoogleMapsAPIのバグ? 結論から書くとGoogleMapsAPIバグかも 現象が発生するコー…

Backbone.js + Marionette.js + stickit を使ってみた

普段WEBアプリとか経験がなくてMV*とかなんぞや?って感じの私です。(正直大本のMVCの理解も怪しいですが) WEBアプリを作成してて、AngularJSってすごい便利!一生ついていくッスと思っていたら、 「IE8、9で動かないんですけど?」 来年1月サポート切れ…