読者です 読者をやめる 読者になる 読者になる

ぱちおのいろいろ。

プログラミング、イラスト、作曲、アニメ等好きな事や近況報告とかアウトプットしたい時に使います。

ホームページを作る(サーバーサイドなし)

自分用メモ②

「非情報系でも管理できるホームページ」

「黙って既存のCMSを使え」

とか言わないで><一度やってみたかったんです・・・

某大学のサークルのホームページを作ってる最中です。

まぁそれで色々やってたんで忘れないうちにメモメモ

求められるもの

  • 良い感じに更新しやすい
  • できればHTMLとか開かせないようにしたい
  • サーバ管理なんてたぶんアレなのでフロントで事済ませたい

そこから導き出される結論は

f:id:patioglass:20150307203617j:plain

JSON形式で全部管理させちゃえー!('ω')

JSON形式で更新情報も何もかもコピペ追加で管理させることにけってーい!

$(.hoge).append("<p>引っ張て来たjson文字列</p>");

JQueryでこんな感じでやればいけるでしょっ!

↓↓↓ 結果 ↓↓↓

$(.hoge).append("<p>引っ張て来たjson文字列1</p>");

$(.hoge).append("<p>引っ張て来たjson文字列2</p>");

$(.hoge).append("<p>引っ張て来たjson文字列3</p>");

$(.hoge).append("<p>引っ張て来たjson文字列4</p>");

やばい、なんかアホっぽいことしてる感MAXだ・・・

フォロワーからの天の声

  • Knockout.jsとか
  • AngularJSあるで
  • Vue.jsとかどうよ

短い名前のVue.jsでいいか(適当)

Vue.jsを使う

f:id:patioglass:20150307204940j:plain

なんか良い感じにデータバインディングとかしてくれるらしい。

MVVMなフレームワークらしいけどそもそもMVCすらまともにやってないのでとりあえず動けばいい的なノリで組む。

<div class="wrapper">
   <ul>
     <li v-repeat="json">
       {{test}}
     </li>
   </ul>
</div>
var test=new Vue({
        el:".wrapper",
        data:{
            json:[]
        },
        methods:{
            /*初期化処理*/
            init:function(){
                $.getJSON("hoge.json",function(data){
                   $.each(data,function(i,value){
            test.$data.json.push({test:value}); 
           });
                });
            }
        },
        created:function(){
            this.init();
        }
    });

おおおおスッとした・・・!かな?

あってるか分からないけどappendを猿みたいに書きまくるよりかは綺麗になったと思うし、この他にも色々と使えるのいっぱいあるのでまぁドキュメント読んで

参考にさせていただいた↓

http://vuejs.org/api/

Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita

時間の関係上最低限の実装で済ませちゃったので構造化の機能とか触れられず仕舞い・・・oh・・・

Vueにより結局何ができたか

  • 簡単な検索機能
  • アーカイブの実装
  • 各会員紹介ページ的なもの

たぶんVueの良さの50%も引き出せてないですけどフロントだけでここまでできたっ!

他学んだこと

$.whenを使って複数の非同期処理 - ぱちおのいろいろ。

フロントのゴリ押し

つらい

サーバーサイドないのでユーザー認証ないのもつらい

メールフォームはGoogleのスプレットシートで代用した

あとJSON形式でコピペなんでタイムスタンプ的サムシングもID振り分けも手打ちっていうのもなんかアレ

サーバ扱えるならサーバ使ってこうなって感じがひしひしと伝わりました()

新たにはいった情報

どうやらテンプレートエンジンなるものがあるらしい。。。

でもさすがに触れる時間今ないので今度Webするとき調べようと思います。