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

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

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

諸事情から、Unityの画面上にUIView(UIImageView)を出してみる実験をしてみました。 ちなみにタイトルにわざわざUnity5と付けているのは、無料ユーザーでもiOSのプラグインが使えるからですw 確認はしていませんが、おそらく4系でも動くと思います。 やった…

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

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

カクカクシカジカで、Java(Servlet)を使ってWebサイトを作ってみることにしました。 ひとまず、これまでSinatraで作っていたものをJava、 Tomcatを使って置き換えてみます。 jvTabTest - Github 準備 Javaのインストール 「sudo add-apt-repository ppa:webu…

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

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

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

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

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

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

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

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

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

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

Slimのサニタイジング しばらくハマっていた、DBやController(app.rb)でSlimやHTMLのコードをviews/blog.slimで表示しようとすると、 HTMLがエスケープされてタグがそのまま表示されてしまう問題について。 結論から書くとSlimの仕様でした、という話です。 …

Pagination 以前DBのレコード数をカウントしてそこからページャーを生成する、と書いていたのですが、実はそれを実現してくれるGemがあるとのこと。 それに気づいたのはブログ本文で改行する方法を調べていたときのこと。 下記のページで「will_paginate」が…

引き続きSinatraの話。 Blogといえば、RSS(またはAtom)配信は欲しいところ。早速調べてみました。 RSSを生成する Controllerであるapp.rb(ファイル構成などはこの辺参照)で行います。 デフォルトで用意されているライブラリ(rss/maker)を使うため、Gemfileな…

今回はControllerに当たるapp.rbを中心とした、URLのルーティングについて。 この辺でも少し触れていましたね。 URL構成 現在の構成はこんな感じです。 localhost:9292/ --- ブログ記事の一覧を表示 localhost:9292/tag/XXX --- タグ検索の結果を表示。XXXに…

大晦日ハッカソン、続く正月ハッカソンで、 前回作成したプロジェクトを元にブログサイトに挑戦してみました。 sntVaguely - GitHub やっぱり時間や目標をある程度決めて開発するというのは良いもので、まだまだ課題は多いとはいえ、ブログ記事を表示する部…