はてなブックマーク

Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 前回、Vue.extendを利用したカスタムコンポーネントを作成しましたが、CSSを梱包したカスタムコンポーネントの作成方法を紹介していきます。前回のコードをリファクタリングしつつ進めて行きましょう。 ソース 1.前提条件 [カスタムコンポーネントの実習の終了] (http://qiita.com/MariMurotani/items/10702fbcae2997fcae80) 2.まずは、コンポーネントを全部単一ファイル化します。 <template> <div class="nickname">{{ sharedState.state.property.nickname }}<

Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 1. 前提条件 前回の実習を終わらせておくこと 2.axiosとmockeyをインストール VueでAjaxするには何を使えばいいの？っていう話が調べていくときな臭い感じ・・・・・ https://jp.vuejs.org/2016/11/03/retiring-vue-resource/ とりあえず、上記の公式コミュニティでおすすめされてる、axiosを使ってみたいと思います。 var mocky = require('mocky'); mocky.createServer([{ // simple GET route without request body to match

Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 1.前提条件 Vue-CLIのインストールを終わらせておく事 サンプルコード 2.フォームを作成 Scene1.vueを編集していきます。 まずは一番単純なテキストボックスとデータバインディングを試してみましょう。 テキストボックスに文字を入力するとそのまま上部に文字が表示されます。 これが有名な「バインディング」という機能です。 STARTボタンを押すとScene2がレンダリングされるようになっています。 <template> <div class="scene1"> <p class="name">NICKNAME: {{ nickname }}</p> <input clas

Index 1.VueCLIでHelloWorld 2.VueJSでフォームを使おう 3.VueJSで単一ファイルコンポーネント 4.VueJSでAPI通信 5.VueJSで猫検索アプリ作成 6.おまけ 7.おまけ Rails x Vue.js 8.おまけ Rails x Vue.js x VueX Vue.jsをお手軽に始められるVueCLIを使って実装を始めます。 とってもお手軽なMVVCフレームワークでコンポーネント(部品)の管理が容易でしかも覚えやすいと評判なので早速試してみましょう。 前提条件 HTML,CSS,Javascriptの経験者 NPMをインストールしている事 MACユーザー ChromeWebDebug機能が使える状態 VueJSのデバッガも入れておきましょう vue --version 2.8.1 npm --version 3.10.8 JS記述式はES6 1.

sudo yum groupinstall "Development Tools" yum install mlocate yum install openssl-devel yum install bzip2-devel yum install zlib-devel bzip2 bzip2-devel readline-devel sqlite3 sqlite-devel openssl-devel yum install gcc gcc-c++ pyenv install 3.5.2 pyenv global 3.5.2 pyenv rehash [ec2-user@ip-172-31-5-227 ~]$ python3 --version Python 3.5.2 [ec2-user@ip-172-31-5-227 ~]$ pip3 --version pip 8.1.1 from

はじめに ActiveAdminを仕事でいじったので分かった事をまとめてみます。 (Ruby on rails 4.3) ActiveAdminとはModelに設定したパラメータを利用してCRUDをサポートする画面をほぼ動で作成できるruby gemです。管理権限をもった認証機能はDeviceとCancanの連携で実現する事ができます。 表示される入力フォームにはFormasticを利用しています。 Validationについてはモデルのvalidation設定に従ってエラーを表示するようになっているのでモデル側に記載する事になります。 ActiveAdmin http://activeadmin.info/docs/documentation.html http://www.rubydoc.info/github/activeadmin/activeadmin Formastic htt

前回の続きです。 rubyお勉強を続けます。 1. MariaDBのインストール 1.1 本体 こちらを参考にMariaDBを入れます。何も説明する事はないくらい簡単です。 [root@localhost share]# yum -y install mariadb-server mariadb .......... 完了しました! [root@localhost share]# yum -y install mariadb-devel.x86_64 .......... 完了しました! [root@localhost share]# systemctl start mariadb [root@localhost share]# systemctl enable mariadb .......... 8月 03 17:42:15 localhost.localdomain systemd[

実はKalturaはOSSでも提供されています。 https://github.com/kaltura Non-SSL Step-by-step Installation の手順に従ってインストールです こちらの方のブログがの方が参考になるのでリンクもはっておきます 1.仮想環境にCentOS準備 今回はvegrantを利用 本家からダウンロード IPアドレスを【192.168.3.3】に設定します vagrant box add centos64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20131103.box mkdir -p ~/Vagrant/CentOS64 cd ~/Vagrant/CentOS64 vagrant init centos64 vi Vagrantfile conf

#!/usr/bin/env python # -*- coding: utf-8 -*- import nltk import sys import tweepy import json import subprocess import datetime import MeCab from tweepy.streaming import StreamListener from tweepy import OAuthHandler from tweepy import Stream from numpy.core.multiarray import empty #Variables that contains the user credentials to access Twitter API access_token = "＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊" access_token_

SpringBootでメッセージ国際化をしてみます 何をするかというと、HTML内に表示されるメッセージを一つのファイルにまとめておきます。 あとからの修正が楽になるなどのメリットがありサイトを多言語展開する場合などに役立ちます プロパティファイルに指定したメッセージは起動時に読み込まれ、インスタンス内にキャッシュされます キャッシュされる方を使いたい場合には、ResourceBundleMessageSourceを使います。 今回は リソースが変更されたらメッセージも変更される様にしたいのでReloadableResourceBundleMessageSourceをつかいます。 この機能はSpringの機能を利用する事になります。 必要なライブラリなどはなく、 1.ビーン登録 2.メッセージ用のpropertyファイルの配置 3.MessageSourceの継承 のみになります。 1.ビ

(*うまくいかないので継続監視中) OS: OSX Yosemite 10.10.4 Darwin Kernel Version 14.4.0 #1. VSCodeの利用 https://code.visualstudio.com/ からOSX用をダウンロードしてApplicationフォルダにコピーして起動します。 #2. GO拡張のインストール GO拡張もこちらを見ながら入れます。 こちらも参考に。 (F1を押すとテキスト入力が画面上部に表示されるので、extensionと入力して、InstallExtentionを選択。 ext installと表示されるのでgoと入れるとGoExtentionが選択可能になる。) #3. settings.json 進んでいるといつの間にか、.vscodeというディレクトリができていて、その中にlaunch.jsonとtasks.jsonが作成され

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回はthymeleafの拡張についてご紹介します。 http://www.thymeleaf.org/doc/tutorials/2.1/extendingthymeleaf.html SpringBootのテンプレートエンジンとしてthymeleafを使うメリットがいくつかあります。 1.PHPなどで利用していたテンプレートの流用 PHPのフレームワーク的な書き方ができるので、JSPと違って書き直しの手間がすごく省けます。 2.独自タグの定義 <p th:mytag="${tree}"></p> みたいな感じで独自タグを実装できます。 実装はエレメントごとかアトリビュートごとなど色々選べます。 登録した独自タグに対応するクラスを呼び出してくれるのでそこで編集を行うといったイメージです。 アトリビュート: AbstractAttrProcessor コメント: AbstractComme