2014-12-10

Mac使っててwikipediaに繋がらない時の対処方法

その他

Wikipediaなどに繋がらないのはipv6 or AVASTが問題?

原因として

・ipv6が原因?

・セキュリティソフトのavastが原因?

mac book airを使ってるのですが wifiの種類によってはwikipediaなど特定のサイトに繋がらないという問題がありました

f:id:Yhei:20141210123423p:plain

しかしエラーコードの ERR_EMPTY_RESPONSE

を検索してもなんか情報があまり出てこず・・・というか似たような現象が起きてるブログなんかもブロックされて表示できない＼(^o^)／みたいなことが起きたのでこうやったら対処できたよ！ってやつを

ipv6をいじってみる

色々調べてみると、もしかしたらネットワーク環境のipv6というものをいじればいいんじゃないかとなっていじってみると確かにページが表示されるようになりました！

ipvに関しては↓

【Wi-Fiルータ】IPv6通信（光テレビ・ウイルスクリア）ができない／設定...

フレッツ光ネクストのIPv6まとめ: ぐれのメモ帳

WINDOWS7 「識別されていないネットワーク」と出てインターネットにつながらない - マイクロソフトコミュニティ

IPv6 - FacebookとGoogleだけ、やたら遅い場合の対処 - Qiita

対策としては

Dockから

「システム環境設定」

↓

「ネットワーク」

↓

下のほうにある「詳細」

↓

TCP/IPタブの中にあるIPv6の設定を自動からリンクローカルのみに変更してみる

これでwikipediaなどに接続できなかった問題を解消することができました

avastのシールドをoffにすると繋がる

自分はセキュリティソフトでavastを入れてみてるのですが avastによってアクセスがはじかれてるのもあるみたいです

Wikipediaなどにつながらない

というわけでavastの設定を行いましょう

アプリケーションフォルダの中の Avast Mac Securityアイコンをクリック

↓

一番したのPreferenceをクリック

↓

Web Shieldの settingをクリック

↓

Enable IPv6のチェックを外す

↓

Done

これで繋がるようになりました

どちらでもよいとは思いますが、なんかIPv6を使ってるとページの読み込みが遅くなる場合があるみたいですね

IPv6 - FacebookとGoogleだけ、やたら遅い場合の対処 - Qiita

このへんもうちょっと調べてみてよいほうを選ぼうかなーと思います。

2014-11-27

Three.jsのBoxGeometryでそれぞれの面に別々の色を指定する方法

プログラミング three.js

Three.jsで直方体の面に別々の色をあてたいので調べてみた

HTML5による物理シミュレーションを読んでいるのですが

HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo

作者: 遠藤理平
出版社/メーカー: カットシステム
発売日: 2013/02
メディア: 単行本
この商品を含むブログ (4件) を見る

物体の面ごとに違う色などを指定してあげたいので調べてみた

(1) MeshFaceMaterialを使う

こちらの記事を参考にしました THREE.jsのCubeGeometryで六面別々のMaterial(Texture)を使う方法 - tsuge development page

しかし2年前の記事だからなのかちょっと記述方法が今と異なってたので訂正 (three.jsのリビジョンはr69を使ってます)

MeshFaceMaterialメソッドを使えば複数面をバラバラに指定することが出来ます例えば直方体を描写する時は、一番シンプルなやつだと

//箱型オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//材質の宣言
var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);

のように記述しますが、六面に異なる色を付けたい場合は配列を用いて

//箱型オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//材質を配列で指定する(箱型なので6面分)
var materials = [
    new THREE.MeshLambertMaterial({color: 0x00ff00}),
    new THREE.MeshLambertMaterial({color: 0x00ff00}),
    new THREE.MeshLambertMaterial({color: 0x0000ff}),
    new THREE.MeshLambertMaterial({color: 0x0000ff}),
    new THREE.MeshLambertMaterial({color: 0xff0000}),
    new THREE.MeshLambertMaterial({color: 0xff0000})
];
//MeshFaceMaterialで材質を宣言
var material = new THREE.MeshFaceMaterial(materials);
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);

のようにします。 MeshFaceMaterialの引数にmaterialsを用いてあげます。

ドキュメントに書いてあるんだけどちょっとわかりにくいんだよね・・・英語だし http://threejs.org/docs/#Reference/Materials/MeshFaceMaterial

(2) for文でロープ表現を用いる =>ランダムに色が指定されます

これは、three.jsのファイルをダウンロードした時のexampleフォルダに入ってるcanvas_geometry_cube.html内の記述を参考にしました

コードを書いてやると

//形状オブジェクトの宣言
var geometry = new THREE.BoxGeometry(20, 20, 20);
//for文で材質をランダムに指定
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
    var hex = Math.random() * 0xffffff;
    geometry.faces[ i ].color.setHex( hex );
    geometry.faces[ i + 1 ].color.setHex( hex );
}
//材質の宣言
var material = new THREE.MeshLambertMaterial({ vertexColors: THREE.FaceColors });
//オブジェクトの生成
mesh = new THREE.Mesh(geometry, material);
//シーンへの追加
scene.add(mesh);

です。0xffffffをランダムな数字で掛け算してやることで毎度違う色を生成してるみたいです

今のところはこの2つなので他にもあれば便利だなーと思います。なお、テクスチャをそれぞれの面で別々に指定する場合も最初の方法を使えば出来そうです

2014-11-21

Railsチュートリアル第9章の演習を先にやると第10章で詰まった

Ruby Rails プログラミング

Rails チュートリアルの第10章でつまった

第10章のリスト10.33と10.34のところで赤信号だらけになってしまう原因は、第9章の演習でコードを変更していたため

2014-11-20

jQuery_uiのエフェクトの書き方がfxからshowに変わってる

プログラミング

jQuery_ui の使用がバージョンに異なっていて困ったので記載

2014年11月現在、jQuery_uiのバージョン1.11.2を使っていますがバージョンが違っているせいかコードの記載方法が異なる・・・

エフェクトをつけるのに fx opacityなどを使っていたのですが全然動かない・・・

例えば今、jQuery_uiでtabsを扱っているのですがネットで検索した情報や一年前の本などではちょっと書き方が異なってて詰まったので記載

tabsのエフェクトを変える

jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions

のサイトが真っ先にヒットしたけど今は記述の仕方が違うみたいなので注意!

jQuery_uiのサイトのAPI Documentationを参考にしました

http://api.jqueryui.com/tabs/

例えば、タブをゆっくり表示させる透明度変化のアニメーションは

古い

$('#tabs').tabs({fx: {opacity: "toggle", duration: "normal"}})

のように記載していましたが

新しい

$('#tabs').tabs({show:{effect:"fade", duration: 100}});

(完全に一致したエフェクトではないみたいですが)

のようになります。色々と試してみなければですねー

ちなみにtabsだけ作りたい場合のコード全体を下に記載しておきます (jquery-ui.min.jsなど必要なファイルのディレクトリはご自分で場所を設定されてください)

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>jQuery_UI_tabs</title>
       <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
       <script type="text/javascript" src="jquery-ui/external/jquery/jquery.js"></script>
       <script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
       <script>
           window.addEventListener("load", function () {
               resizeTo(400, 300); //ウインドウサイズを指定
               //タブ切り替えインターフェースの実装
           });
           $(function(){
               $('#tabs').tabs({show:{effect:"fold", duration:"normal"}});
           });
       </script>
       <style>
    body{
        font: 10px "Trebuchet MS", sans-serif;
        margin: 40px
    }
    .demoHeaders {
        margin-top: 2em;
    }
    </style>
   </head>
    <body>
    <!-- tabs -->
        <h2 class="demoHeaders">Tabs</h2>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">First</a></li>
                    <li><a href="#tabs-2">Second</a></li>
                    <li><a href="#tabs-3">Third</a></li>
                </ul>
                <div id="tabs-1">タブ1番です
                </div>
                <div id="tabs-2">タブ2番です
                </div>
                <div id="tabs-3">タブ３番です
                </div>
            </div>
    </body>
</html>

2014-11-19

Rails チュートリアル 9章　演習

Rails チュートリアル第9章　9.6 演習

英語版の解答はありました

Hartl's Rails Tutorial - Solutions for Ch 9 Exercises · Valhalla

2. の

リスト9.3の Gravatarの [change] リンクを改造し、別ウィンドウ (または別タブ) で開くようにしてください。ヒント: Webを検索してみましょう。この目的にうってつけの堅牢なメソッドが見つかるはずです。_blankという文字も一緒に検索してみてください。

の部分

検索したら、どうやら _blank というのを使うらしい

下記を参照

ruby on rails - Open link in new tab with link_to - Stack Overflow

一応、答えとしては

app/views/users/edit.html.erbの

<%= gravatar_for @user %>

<a href="http://gravatar.com/emails">change</a>
</div>

のhrefのところに

<a href="http://gravatar.com/emails" target="_blank">change</a>

と、target="_blank" を追加してやればよい

これだけで新規タグでリンクが開くようになります

target = .......

はHTMLのタグによるものなので

HTMLのリファレンスが参考になります

_self とか _top など別の属性もあるので

参考に

<a>－HTML5タグリファレンス

9.6.3 ProfileやSettingのリンクが無いことをテストする

一応、こちらのページに解答例を見つけたのですが

Railsチュートリアル 4.0版の演習について、自分なりの解答をまとめてみた - メモ的な思考的な

FactoryGirlを生かした解答例を自分なりに考えてみました

(Rspecは3系でやってるので、it {should ....}ではなく it {is.expected.to ....}になってます)

spec/requests/authentication_pages_spec.rb に対して

require 'spec_helper'

describe "Authentication", :type => :request do

subject { page }

describe "signin page" do
let(:user) {FactoryGirl.create(:user)}
before { visit signin_path }

it { is_expected.to have_content('Sign in') }
it { is_expected.to have_title('Sign in')}
it {is_expected.not_to have_title(user.name)}
it {is_expected.not_to have_link('Users', href: users_path)}
it {is_expected.not_to have_link('Profile', href: user_path(user))}
it {is_expected.not_to have_link('Settings', href:edit_user_path(user))}
it {is_expected.not_to have_link('Sign out', href: signout_path)}

end

describe "sign in" do
before { visit signin_path}

describe "with invalid information" do
let(:user) {FactoryGirl.create(:user)}
before { click_button "Sign in"}

it {is_expected.to have_title('Sign in')}
it {is_expected.to have_selector('div.alert.alert-error', text: 'Invalid')}
it {is_expected.not_to have_title(user.name)}
it {is_expected.not_to have_link('Users', href: users_path)}
it {is_expected.not_to have_link('Profile', href: user_path(user))}
it {is_expected.not_to have_link('Settings', href:edit_user_path(user))}
it {is_expected.not_to have_link('Sign out', href: signout_path)}

describe "after visiting another page" do
before { click_link "Home" }
it {is_expected.not_to have_selector('div.alert.alert-error') }
end
end