SEEDS Creator's Blog

Codecademyをやってみた

こんにちは、WEBエンジニアのyuchiです。

最近、WEB上でプログラム学習ができる無料のサイトがたくさん作られていますよね。 そんな多々あるサービスの中で、私は以前「Codecademy」というサービス(もちろん無料)を使って勉強してみました。

○Codecademy http://www.codecademy.com/

普段、私は主にPHPをさわっているので、今回は違う言語にチャレンジしようと思い、 よく使われている汎用なプログラミング言語「Python(パイソン)」を選択してみました。

すると、下記のような画面が出てきます。

 

 

「Codecademy」は日本語に対応していないようなので、説明は英語で書かれています・・・

 

とりあえず説明を読みながら、黒いエディター部分にプログラムを書いて、「Save & SubmitCode」をクリックしました。

 

書いたコードがOKだったら、右上の部分に結果が表示され、プログラムが実行されます。 このように、1つクリアすると次の章に進んでいき、徐々に基礎的なプログラミングが学べるようになっていました。 誰でも気軽に始められるので、初心者の方もこういったツールをぜひ活用してみてほしいです!

以上、終わります。

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。 また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。 が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに 「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です! また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。 もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。 従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで 確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような 状態になってしまうという問題が起こります。 また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって しまうことがあります。 課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに"overflow-x: scroll;"が適用され、スクロールしてテーブルを 確認することが出来るようになるという仕様でした。 この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。

MW WP Formを使って動かない時に確認したいこと


「Word Press」のコンタクトフォームと言えば「Contact Form 7」。 いつも迷うことなく利用し続けていました。 「Contact Form 7」といえば、海外で開発されているため、基本確認画面がありません
日本では確認画面が必要な案件が多く、「Contact Form 7」を使用するともれなく カスタマイズしなければなりません。
そうなると手間がかかってしまったり、精度が落ちてしまうという問題点が....

そこで、新しく話題に上がった「MW WP Form」を試しに使ってみました!

管理画面からの設定が簡単で、とても使いやすい!
ですが、実装してみたところ動かない!?という問題にぶつかってしまいました・・・

いろいろ調べてみましたが、比較的新しいプラグインということもあり情報が少ないのが難点。
有力な情報がなく困ってしまいました。
試行錯誤した結果、なんとか解決することができたので、その際の注意点をまとめたいと思います。

1.ループの記述がない。


<p>タグが入るのが面倒で、独自テンプレートに $post->post_content; だけを記述していることが 私はよくあります。

これではショートコードは展開できないので、

[code] if (have_posts()) :
while (have_posts()) :
the_post();
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
the_content();
endwhile;
else:
<p>記事がありません</p>
endif;
[/code]

こんな感じで書くとショートコードも展開出来て、無駄な<p>タグも除去できます。

2.wp_head();とwp_footer();が足りていない。


これは、プラグインが動作しない大半の原因ですね。
独自テンプレートを作る際どうしても忘れてしまいがちなので要注意です。

3.<form></form>タグが作成したページに入っている


私は、これに一番躓いてしまいました。
フォームのページをコーディングし、WordPressに組み込む際に、管理画面にそのまま貼り付けていました。
その時に3.<form></form>が残ってしまっていたようです。
「MW WP Form」は自動でコードを挿入してくれるので、それよりも中に
<form></form>タグがあると動きません。
きちんとチェックしなくてから組み込まないといけませんね。反省。

まとめ



実装してみた感想として、基礎的なところを見落としていたことが悔やまれます。
動作さえすれば、使い勝手もよく優れたプラグインなので、今後カスタマイズなどの記事も かけたらと思っています。



wifiやbluetoothってなに?

今やIT業界だけでなく、日常生活でも普通に使われているwifibluetooth。 一体これらが何なのか、物理学の博士号を取り損ねた僕が、知っている範囲で説明したいと思います。

wifibluetoothとは電磁波です

これらの正体は、電磁波と呼ばれるものです。 人体に悪影響があるとかないとかよく言われている、あの電磁波です。 ちなみに、太陽や蛍光灯の光も電磁波なのですが、中でも、蛍光灯は白かったり赤かったり青かったり、 様々な色がありますよね。 これは何が違うのか?というと、波長や周波数が違うため、違った色合いで見えるのです。

可視光

一般的に「光」と呼ばれているのは、私たちが見ることのできる 波長が約380nm〜780nm(1nm=0.000000001m)の電磁波のことを指します。 これを「可視光」と言います。 この範囲以外の電磁波は、私たち人間には見ることができません。

赤い光はだいたい780nm、青い光はだいたい400nmです。 この波長は、とても短いです。

マイクロ波

一方、wifibluetoothは「マイクロ波」と呼ばれていて、 波長が約100μm〜1m(1μm=0.000001m)の電磁波のことを言います。 あと、電子レンジで使っている電磁波もマイクロ波です。 こちらの波長は、可視光に比べると断然長いです。

電磁波の特徴

電磁波は、波長が長ければ長い程、壁などの障害物に邪魔されずに透過します。
みなさん、壁の向こうって見えないですよね?僕にはそんな能力はないです。 これは、光の波長が短すぎて、壁をすり抜けられずに反射したり吸収されたりするからです。 私たちが見ることができる「可視光」の電磁波も、同じ理由で障害物をすり抜けられません。

では、マイクロ波はどうでしょうか? 先ほど説明した通り、wifibluetoothは波長が長いため、違う部屋にwifiルーターを置いていても、 壁をすり抜けてパソコンやスマホwifibluetoothの電磁波を受信することができます。 つまり、パソコンやスマホで、壁の向こうのwifiを透視しているのです。 私たちも、もしwifiなどの電磁波を見ることができたら、壁の向こうを透視できるかもしれません!

最後に

いかがでしたか?普段何気なく使っているwifibluetoothですが、仕組みが分かると面白いですね。 書きたいことはもっとあるのですが、次回のお楽しみということで、今回はこれで終わります。

外部サイトからのDB接続について(MYSQL)

こんにちは、yagiyagiです。 早速ですが、本題に入ろうと思います。

 

外部サイトからDBサーバ(MYSQL)に接続する場合、セキュリティの観点から 通常、接続できません。権限を付与する必要があります。

GRANT ALL PRIVILEGES ON *.* TO スキーマ名@"%" IDENTIFIED BY 'passward' WITH GRANT OPTION;

ですね。ググるとよく見かけます。(詳細な説明は他サイトを参照してください) これで、少しハマってしまった経験があるので、ご紹介したいと思います。

どういう経緯かはよく覚えていないのですが、

GRANT ALL PRIVILEGES ON *.* TO hoge@"%" IDENTIFIED BY 'passward1' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON *.* TO hoge@"192.168.1.199" IDENTIFIED BY 'passward2' WITH GRANT OPTION;

という2つのSQL文を発行しました。エラーなく正常終了します。 そして接続しようと試みたところ、コネクションエラーが発生。。。

うーーん、なぜ接続できないのだろうかと悩み、ユーザ情報を確認してみると

select user, host,password from mysql.user;

+------+---------------+----------+
| user | host          |password  |
+------+---------------+----------+
| hoge | %             |passward1 |
| hoge | 192.168.1.199 |passward2 |
+------+---------------+----------+

あれ!?パスワードが微妙に違う。。。(汗)

もうおわかりですね。 hoge/passward2で接続を試みた結果がコネクションエラーでした。。 hoge/passward1で接続するかキチンと意図した権限を付与しなおすと正常接続できました。

ググってコピペで実行。。。よくやってしまう行為ですが 開発環境とはいえ、意味を理解して実行しないといけないなと反省しました。というお話です。

ディスプレイが・・2

こんにちは、ishinoです。

ディスプレイが・・未だにまぶしいです(+_+)

 

以前にもこんな記事を書きました  → ディスプレイが・・

 

現在、前記事で紹介したプラグインを全く使っておらず、なんでかなーと思いながら またいろいろ調べていたところ、いいものを見つけました!

 

それはこちらです → f.lux

 

以前からあったアプリのようです。

このアプリは、画面のブルーライト成分を日の出からの時間をはかって自動的に調節してくれます。

 

個人的な感想ですが、これを使い始めてから目が全然疲れないです!! 1日中PCとにらめっこをしていても疲れません。 画面を見ることがストレスにならないので、思いっ切り作業に集中できます。

もうアプリオフの状態で画面を見るのが怖い(笑)

 

この威力は、僕が説明するよりインストールしてもらう方が早いと思います。

日頃、そんなに目の疲れを感じていない人でも、普段から目を労わってあげることは 大切だと思いますので、皆さんぜひサクッとインストールしてみてください。

 

最後におまけですが、iPhoneアプリも出ていました! まあ、僕はスマホ持ってないので関係ないケド(笑)

 

ISUCON5に参加しました。

チーム名「京都スイーツnext」でISUCON5に参加しました!

 

昨年に続き2回目の参加です。

昨年はサーバーもシステムも先輩方に頼りっきりで、

僕は邪魔にならないように応援することしかできませんでした( ̄▽ ̄;)

挙句の果てに唯一任せていただいたSELECT文 の「*」をカラム名指定で書くという修正でヘマをして

失格になるという。。

 

今回はスーパープログラマーの先輩がいなかったので、システムの修正は僕が担当しました!

サーバーエンジニアのはらぐちさんと相談しながら、うまく役割分担して修正を進めました。

今回はそこそこ貢献できたと思います。

まだまだできることがたくさんある中終了してしまい、結果は惜しくも本戦出場なりませんでした。

簡単なこともググりながらの作業で、基礎力のなさを痛感しました。

来年も参加して次こそは本戦出場したいです(`・ω・´)

 

ほぼ感想だけになってしまいましたが、修正内容とかはサーバーエンジニアのはらぐちさんもブログにまとめていただいてます。

ISUCON5に「京都スイーツnext」で参加してきました