vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

Javascript

AngularとSpringBootでWebページを作ってみたい その2

はじめに node_moduleをインストールし直す ビルドデータの出力先の変更 CSS Grid Layoutを使う RxJSでJSONデータ取得 おわりに 参照 はじめに AngularとSpringBootでWebページを作ってみたい その1 引き続きWebページを作成すべくあれこれ試しています。 今…

AngularとSpringBootでWebページを作ってみたい その1

はじめに ヘッダーを作る バナーを作る アニメーションをつける キーイベントを取る top-banner.component.tsのコード おわりに 参照 はじめに ひょんなことから試しにWebサイトを作ってみることにしました。 フロントはAngular、バックはSpring bootで、以…

AngularのAnimate2

はじめに マウスオーバーとマウスが離れた時のイベントを取得する CSS アニメーション ngFor 参考 はじめに 前回の続きです。 公式ドキュメントのボタンのように、マウスオーバーした時にボタンが浮き上がって見える、という動きを真似してみます。 マウスオ…

AngularのAnimate

はじめに アニメーション EaseType アニメーションの開始・終了イベント 参考 はじめに 前回に続いてAngular.jsのお話。 昔Angular.jsの弱点としてアニメーションが挙げられていた気がしていたので(別のものと混同している恐れもあります)、 ちょこっと調べ…

関モバ #19で発表してきました

はじめに 準備 スライドについて おわりに 参考 はじめに 10/26に行われた関モバ #19で発表してきました。 kanmoba.connpass.com 今回のネタは前回のWebVR。 https://masanori840816.github.io/KanMoba19/slidepage.html 緊張もしたし、時間も少しオーバーし…

three.js + WebVR BoilerplateでモバイルVR

はじめに 準備 3Dモデルを作る Sceneを作る 3Dモデルの読み込み ライティング 結果 おわりに 参考 はじめに 前回Spring Bootを使ってHTMLを表示するところまでやりました。 そのままAngularJSで何かサイトを作ろうと思っていたのですが、ちょっと予定を変更…

Angularでテキストを分割してテーブルに入れる

やったこと Controller as コード 参考 終わりに ちょっと必要になったのでメモ。 やったこと TextAreaに入力された文字列を、改行・コンマ区切りで分割してTableにセットします Controller as 以前Angular.jsを使った時は、formなどからデータを取得する際…

Angularにも触れてみる 2

前回の続きです。 やったこと 登録済みのタグ(カテゴリ)情報をDBから取得して、チェックボックスとして表示する 投稿ボタンを押した時に、チェックされたチェックボックスのIDをJSONとしてサーバ側のコントローラに渡す DBからデータを取得する サーバ側から…

Angularにも触れてみる 1

はじめに 前回はReactを使ってブログ記事を表示するページを作りかけてみたわけですが、表示するための記事を投稿するためのページが欲しくなりました。 投稿するページは自分だけが利用できればそれでよく、正直DBにそのままデータを突っ込んでも。。。と思…

React.jsに触れてみる4 (+Sinatra)

ふとした思いつきで、今年のはじめに作成しかけたまま放置しているブログで、Reactを使ってみることにしました。 元のプロジェクトはsntVaguely - GitHubです。 やったこと Ajaxを使って、ActiveRecordで取得したデータをJSON形式で取得する。 取得したJSON…

React.jsに触れてみる3 (2の修正)

前回をなんとなくChromeで表示したところ、エラーが結構出ていたため修正したお話。 ソースコード javascript.js (function () { var _intRightTabNum = 2; // 動的にCSSを切り替えるのに使用. var tabBgStyle = { color: '#0000FF' }; var ShowTabs = React…

React.jsに触れてみる2

3/31追記 Chromeで実行するとエラーが発生していたため、一部コードを修正しました -> React.jsに触れてみる3 (2の修正) 別のネタをはさみましたが、前回の続きです。 やったこと Radioボタンで作成したタブをクリックした時にページの内容を表示する 上記ペ…

React.jsに触れてみる1

また唐突な路線変更ですが...。 前回までのサーバーサイド言語のJava置き換えに挑戦しているうちに、「ボタンやタブクリックで変更するHTMLは、わざわざHTMLの形で読み込む必要はないんじゃないか」という考えに至りました。 で、切り替えて表示するHTMLをJa…

Servlet + TomcatでWeb その2

はじめに 前回の後半で、 非同期でHTMLファイルを読み込んでページの一部を置き換える処理をしていましたが、結局JavaScriptから直接WebContent>contentsにあるファイルを取得することにしました。 javascript.js 〜省略〜 this.getHtml = function(intNewT…

【Ruby Gem】JasmineでJSテスト 2

今回はBackbone.Viewのテストについて(そろそろRuby Gem版だろうがスタンドアローン版だろうが関係ない内容になっていますが…)。 以前から使用しているテスト用のプロジェクトをGithubにあげてみました。 * https://github.com/masanori840816/sntTabTest や…

Chromeでのbackbone-min.js、underscore-min.jsの読み込みでエラー

ちょっと良くわからない問題にぶつかったのでメモ。 Google Chromeで以前から作成しているサイトを開くと、「backbone-min.map」と「underscore-min.map」で404エラーが発生します(XubuntuのChrome ver.40.0.2214.115、backboneはver.1.1.2、underscoreは1.8…

【Ruby Gem】JasmineでJSテスト 1

前回に引き続きJasmineと戯れてみたメモ。 思ったより苦戦したので、とりあえず現状をまとめます。 なおテスト対象のJavascriptはここ参照(コードはそろそろGithubにでも上げることにします)。 javascriptSpec.js describe("javascript.js", function() { va…

【Ruby Gem】JasmineでJSテスト 準備編

Javascriptのテストをしたい、と思い立って調べたところ、Backboneの本で紹介されていたJasmineが良さそうだったため、試してみることにしました。 やりたいこと 前回まで作成していたTabを非同期で切り替えるSinatraプロジェクトで、Jasmineを使ってテスト…

Backbone.jsを使ってみる 3

引き続きBackbone.jsについて。 今回はBackbone.ModelとBackbone.Collectionを使ってこれを置き換えてみます。 やったこと Backbone.ModelとBackbone.Collectionを使って、Ajaxで取得するHTMLファイルの名前を管理する。 HTMLファイルは、タブで切り替えるペ…

Backbone.jsを使ってみる 2

前回の補足。 Viewのイベント・メソッドを指定する部分「events:{}」で、イベントを取得するID・クラス名を指定する方法について。 viewTab.slim section#tab_frame input#arrow_button_left.button_arrow type="button" label.arrow_label for="arrow_butto…

Backbone.jsを使ってみる

前々回作成したタブの切替部分を、Backboneを使って置き換えてみました。 準備 必要なファイルを取得して、javascriptファイルと同じ、「public/js」以下に置きます。 Backbone.js Underscore.js ※その他、「json2.js」も入れている方もいるようですが、とり…

JavascriptとCSSで表示切り替えとか

前回はTabを押した時にページ遷移をして(表示される内容は変わっていませんでしたが)内容を切り替えていました。 今回は、前回作ったものに更にボタン(ラジオボタン)を追加して、非同期でコンテンツの内容を変えてみます。 やったこと ボタンを2つ追加して、…

JavascriptでTab切り替え

諸事情によりめっきりブログ作成が滞っていますが...。 今日はJavascriptとCSSを使って、Tabを切り替えてみます。 やったこと 5つのタブと左右に1つずつボタンを作成 タブのうち2つを非表示にして、左右のボタンで切り替える タブをクリックしたらページ遷移…

Ajaxに触れてみる

今回はちょっと脇道にそれて、SinatraでAjaxを試してみたお話。 はじめに ボタンを押すなど、何か操作をした場合にページ遷移せずに表示内容を変更してみたい。 ということで、jQueryを使って非同期処理をすることにしました。 今回やったこと ページ上に四…