Challenge!

React.js入門

javascript React.js フロントエンド

React.js

最近React.jsを書いていて少しだけ出来るようになってきたので 忘れないためにメモ

Component

ComponentはReact.createClassで作成

var Hoge = React.createClass({
  testHoge: function(){
    console.log("hoge");
  },
  render: function(){
    React.DOM.div({id:"hoge",className:"hoge",style:{height:"20px",width:"20px"},onClick:this.testHoge},"test")
  }
})

React.createClass内で定義した関数はthis.関数名で呼び出し可能(上記参考)

render

ComponentはReact.createClassにrenderメソッドをもったオブジェクトを渡すことで作成可能

ReactDOM.render(React.createElement(Hoge, null),document.body);

随時更新していきます

参考：

React.jsのComponentについて - Qiita

React(仮想)DOMの専門用語 | React 0.13 日本語リファレンス | js STUDIO

CSS3テクニック

デザイン css

随時追加します

カラー関連

backgroundでカラーを指定して、透明度も指定 カラーはRGBで指定 透明度は0~1.0で指定

background-color: rgba(0,0,0,1);

純粋な透明度

opacity: 1

opacityを使うと、子要素まで透明になってしまうため、 一部分のみ透明にしたい時はbackground-colorのrgbaを指定する事が多い

下記はとても参考になりました lopan.jp

Wheneverを使ってcrontabを設定する(CentOS6.7)

Rails Gem Ruby

railsでcrontabを扱いたい場合は「Whenever」が便利

#gemfile

gem 'whenever', require: false

whenever設定ファイルschedule.rbを作成

以下のコマンドを実行してconfig/schedule.rbを作成

$ bundle exec wheneverize .

wheneverは下記のコマンドが実行可能

command: bashコマンド実行
rake: rakeタスク実行
runner: Rails内のメソッド実行
script: scriptの実行

CentOS6を使用する場合

とりあえずcrontabをインストール CentOS6を使用している場合は下記のインストール方法らしい

$ yum -y install cronie-noanacron
$ yum -y remove cronie-anacron

確認

$ crontab -e

Capfileに下記記述をすれば deploy時に勝手にcrontabを更新してくれる ベンリィー

#Capfile

require 'whenever/capistrano'

nginxがうまく繋がらくてログにもエラーが出てない時

nginx インフラ

うまく起動しない

nginxをinstallしたが うまく繋がらないかつログにもエラーが出てない時は ファイアウォールが原因の可能性があります (実際に少しハマった)

ファイアウォールの設定

まずは現状を確認

$ iptables -L --line-numbers

TCP80は許可されてない時は INPUTチェインの5番目のルールとして追加

$ iptables -I INPUT 5 -p tcp --dport 80 -j ACCEPT

ファイアーウォール設定を保存

$ iptables-save > /etc/sysconfig/iptables

あとはnginxを再起動

これでも上手くいかなければnginxを一度removeして 再度実行してみて下さい

Rails link_to にHTMLタグを含む文字列を挿入する

Rails Ruby

最近は、CSSのスタイル等が複雑で、link_to で生成される文字の部分にHTMLタグを挿入したい場合がある。 この場合は、link_to のブロック構文というものを使用する

<%= link_to index_index_path,target:"_blank" do %>
    <i class="icon-home"></i>Home</a>
<% end %>   

#index.html

<a href="/index/index">
    <i class="icon-home"></i>Home
</a>

jQueryでajax

javascript jQuery フロントエンド

jQueryでajax

typeを切り替えればGETなども可能 urlを指定して

$.ajax({
  type: "POST",
  url: "/hoge/foge",
  data: {hoge: "hoge", foge: "foge"}
  dataType: "script"
});

ajaxが成功したら次の処理、失敗したら次の処理なども可能。

$.ajax({
        オプション
    })
    .then(成功時の処理, 失敗時の処理);

これで出来る

Bootstrapの使い方 | 基本編

css デザイン フレームワーク

Bootstrapとは

BootstrapはTwitter社が開発したCSSの「フレームワーク」

Bootstrapを使うメリット

僕が思うBootstrapを使うメリットは、レスポンシブWebデザインに対応しているという点 今回はレスポンシブルを中心に解説

グリッドシステムの使い方

グリッドシステムは、以下ルールで使用

1.class="container"の中に
2.class="row"の中に
3.class="col-｛prefix｝-｛columns｝"
4.｛columns｝は合計値が12になるように数値を指定

サンプルコード

#hoge.html.slim

.container
  .row
    .col-sm-4 hoge
    .col-sm-4 hoge
    .col-sm-4 hoge
画面サイズ ｛prefix｝の意味 {prefix｝の指定方法(*は数値)
モバイル（768px以下） エクストラスモール=xs col-xs-*
タブレット（768px以上、992px未満） スモール=sm col-sm-*
デスクトップ（992px以上、1200px未満） ミディアム=md col-md-*
デスクトップ（1200px以上） ラージ=lg col-lg-*