WordCamp Kansai 2014に参加した話 #wckansai

by codechord. 1 Comment

2014wordcampkansai

グランフロントで実施されたWordCamp Kansai 2014ですけど、記憶に残ってるうちに忘れないようにメモポスト。
日本語いいね。隅々まで理解できるや。前回きつかったから。。。
というわけで、見たセッション順にレポート。

基調講演

WordPressのco-founderのMattの公演。
元々ミュージシャン志望で、出身高校は音楽系の学校、ビヨンセを送り出した学校でもあり、そこではサックスばっかりしていた。1時間あたり$50のレッスン料が高いので、友人のミュージシャンのwebサイトや自作マシンを作る代わりに、レッスンをしてもらったって話。
過去から、現在、近い将来のはなしへと。

Gigazineが早速記事にしてたので、詳しくはそちらをみたほうがよさそう。
http://gigazine.net/news/20140607-wordpress-matt-mullenweg-speech/

世界中にスタッフがいて、リモートワークで成り立ってる企業だけど、来年150人雇用するとのこと。
日本は大好きだけど、日本のことが一生理解できる気がしない(トイレとか特に)から、現地スタッフはどうしても居るよねって。
リモートで成り立ってるところ、どうやって信用できる人間をえらべてるのか、最近個人的にすごい気になってて、人事まわり結構興味があったんだけど、いっぱい並んでて聞けなかった。

続きを読む »

2014年の抱負

by codechord. 0 Comments

hourse camargue

あけましておめでとうございます。

私の正月はというと、javascriptのprototypeだとかの仕様にらめっこしてて、関数型でクラス設計とメリットについて考えたりしてました。

結果、正直まだわかってません。なぜかって、そりゃHuluを試しに契約してみたからじゃない。昔より安くなってて、コンテンツ増えてたので。
登録したら、英語字幕、英語音声のドラマが少ないながらもあったからはまってしまったってところですが。前まで英語字幕なかったんすよね。フレンズのスロー再生から徐々にスピードアップって学習スタンスは変わらないですがコンテンツにあきるので調度良い感じ。Huluで再生速度変更できれば最高なのになぁ。

さて、すごくどうでもいい前置きでした、今日は思うところと目標を書いてみようかなと思います。

続きを読む »

photo by: Daniel70mi

3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating

by codechord. 0 Comments

140bytes @ hhjs

多忙きわまりない2013年初夏でございます。
最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい!ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。
phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。

目次 – Table of Contents

Javascriptのテンプレートエンジンの候補

はじめに申し上げますが、いっぱいあります。ここみるといいです。

癖とかいろいろあって、今回選んだのは3つ(内2つはほとんど似ている)

  1. Microtemplating
    (すごく軽くて、すごく手軽で、すごく早い。作者はjQueryのリードプログラマーだって。はい、すごい。)
  2. Mustache.js
    (Mustacheの書き方を覚えたらたら、いろんな言語でMustache使えますよ。便利ですよっていうやつ。開発者はgithubのcofounder。はい、すごい、すごい。
    ただ、Mustacheだとif文だとかロジックを入れたい場合には非力なため、Mustacheと互換性のあってロジック部分も強化できるhandlebars.jsというものを使う。)

その他候補にあがったのは、

  1. pure.js
    (書き方に癖があるし、雛形となるDOMが生成してある必要があるっぽいので、Ajaxの動的生成には向かないのかな?ということで、今回パス)
  2. underscore.js
    (Ruby使いな人にとってはunderscore.jsでよかったりするのかな。今回は手をだせなかった。)
  3. JsRender
    (簡単そうでjQuery無しで動くけど30kと重い。殆どの場合jQuery導入してるから恩恵がない。ただ、jQueryの本命テンプレートエンジンとして開発されてるっぽいので、jQuery版リリースされたら導入を検討しようかと思ったり。)

(ごく数名の天才エンジニアが提供してくれてるライブラリのおかげで、ほとんどのwebサービスがつくられてるんだなと感じます。)

続きを読む »

photo by: TR4NSLATOR

Sublime Text 2とCtagsの組み合わせがすごい。開発スピードUP[Mac版]

by codechord. 0 Comments

Sublime Text 2では、Ctagsプラグインを使うことによって、コードナビゲーション(Class/Functionが定義されてるところへジャンプ)できるようになります。
これ、僕のベスト10には入ってくる、お気に入りプラグインです。

コーディング中にふとClassやFunctionの動作を知りたくなった時にいちいちFunction名をサイト内検索したり、ドキュメントサイトを開いて探さなくても、キーバインドで瞬時にそのClass/Functionが定義されてるところへジャンプして確認できると。
(こういった機能のこと、コードナビゲーションとかコードナビゲートと呼ばれているようだ。NetbeansやEclipseなんかでは標準でついてる機能なのかな。Sublime Text 2では標準で付いていない。)
WordPressのテーマ、プラグイン開発などの小中規模の開発や、その他CMSやフレームワークを利用する際、ドキュメントを見るより、コードを見たほうが早く解決できることも多いので、効率的に開発できるようになります。

と、文章で記述しても伝わりにくいので、英語ですが動画見てもらった方がイメージをつかみやすいかなと。(4:10~6:00ぐらいまで)
YouTube Preview Image

次の上2つについては以前紹介しましたが、加えてコードナビゲーション機能があると、軽量で高機能のエディタへと進化します。

  1. FTPが使え、保存と同時にアップロードもできる。
  2. Sass/SCSSのコンパイルが簡単。
  3. コードナビゲーションが使える。(←これ)

プラグインは以前からインストールしてマニュアル通り設定していたものの、どうもSublime Text 2からCtagsをリビルドできない状態でして、Terminalから.Ctagsファイルを作っていたのですが、エディタ設定を見なおしたらすんなりSublime Text 2からCtagsをリビルドできるようになりましたので、共有したいとおもいます。(Macでの手順です)

続きを読む »

[Drupal7]既に設定済みのFIELDTYPEをintegerからtextへ変更。

by codechord. 0 Comments

Drupalでサイトの改修していて、既に設定した任意のContent Typesの一部のフィールドの型を変換する必要がありました。(「Integer」型→「text」型へ)
Drupalの管理画面から行えず、Moduleもありませんでしたので、直接データベースの値を修正することになりました。作業時間1時間弱といったところです。検索してもみつからなかったので、せっかくですので、その手順を残しておきます。

手順

この手順は、Integer→textへの型変換の方法です。他の型の場合は手順2,3,4あたりの値が異なってくると思います。

  1. Databaseバックアップ
  2. Table「field_data_field_xxx」の構造を変更
    同様に、Table「field_revision_field_xxx」の構造を変更
  3. Table「field_config」のレコードを変更
  4. Table「field_config_instance」のレコードを変更
  5. フォーマットを指定していた場合、Manage Displayページからフォーマットをリセット。
  6. Drupalキャッシュクリア

続きを読む »

パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel

by codechord. 0 Comments

[追記:2015/05] 2012年12月の投稿なので情報がかなり古いです。iOS7ではスクロールイベントが取りやすくなってます。とはいえ、スマホのパララックスは要注意。

こんにちは。Advent Calendar 2012 軽めのjQuery の17日目を担当します。
http://www.adventar.org/calendars/29

パララックスエフェクトを実装するためのイベントについて少し触れてみたいと思います。

パララックスエフェクトで考えること

パララックスエフェクトのような動きを考える時、いくつかの項目を考慮する必要があるとおもうんですが、例えば

  • イベント発火のタイミング
  • パララックスエフェクトの実装
  • スマホで動作する際の妥協点。
  • 如何に心地よくぬるぬると動かせれるか。

などなど。僕の場合このあたりを考えるんですけど、一番最後の、如何に心地よくぬるぬると動かせれるかが、パララックスのエフェクトを実装するなかでの決め手だと思っています。
実際の所写真などを多用すると、どうしても重くなりますし、いろいろ試行錯誤してみて、ある程度のところで妥協点を見つけるという感じになってしまいますが。

軽めのjQueryということで、イベントの発火のタイミングの一部と、心地よくアニメーションする方法の一部を急いで作ったDemoを見ていただきながら少し考えてみたいと思います。すこし重くなるかもしれません。

ここで使用しているDemoファイルは、githubにも置いておきましたので、ご自由にお使いください。

続きを読む »

一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

by codechord. 8 Comments

こんにちは。Sublime Text 2 Advent Calendar 2012 の13日目です。
http://www.adventar.org/calendars/20

釣りタイトルですいません。
記事が思ったより長くなってしまったので、まず簡単に何をしたいかを説明します。
僕だけじゃないと思うんですが、sass/SCSSを使っている場合に限りですが、サーバにアップするのが自動でできなくて、イライラを感じたことはありませんか?SublimeText2使ったら解消でき、作業効率化できますよ。というお話で、一連の設定手順を紹介します。

SublimeText2を使って、Sass/SCSS(compass)を使い自動生成したcssファイルを自動でサーバにアップロード。これって、大規模開発には向かないかもしれませんが、中小規模のサイト制作には、この方法で一石三鳥!?と思うんです。少なくとも僕の場合はなりました。

SublimeText2での、sass/SCSS(compass)の導入方法と、SFTP/FTPパッケージの導入方法もこの記事に含まれてます。くだりが長いのでお急ぎの場合は、ページ中段のキャプチャ画像がある辺りまでお進みください。

続きを読む »

WordCamp vancouver 2012へ行ってきた、まとめ

by codechord. 0 Comments

VancouverのBCITで開催されたWordCamp Vancouver 2012に行ってきました。WordCamp東京でもWordCamp大阪でもありませんのであしからず。非力の英語力ながらもレポを残します。

WordCamp Vancouver 2012
http://2012.vancouver.wordcamp.org/

案の定、英語が難しい。
ボイレコ持参し、自宅で聞き直してみても、やっぱり難しい。現地にいるときより難しい。勉強不足だね。

というわけで、まとめます。ボイレコの内容しっかり把握できたら書き直します。
2部屋で行われ、全体の参加者は300人前後ぐらいかなと。

続きを読む »

Git / Subversion用語コマンド比較

by codechord. 0 Comments

Github使い出したのはいいけど、Git自体の用語があんまりわかってなかったので、調べてみた。
せっかくなので、書き記します。

GitとSubversionの違いは

そもそもリポジトリとは、更新履歴が保存できる特殊な仕組みのディレクトリのようなもの。
SVNは単一、Gitは分散。(分散型はGitの他にMercurialやSVKでも使われている)

  1. Subversionの場合はリポジトリは1つ。各々が1つのリポジトリに対して更新。ローカルには特定バージョンが、ワーキングコピーとしてファイルが保存される。
  2. Gitの場合はリポジトリが分散。各自が持てる。(作業ディレクトリそのものが、ローカルリポジトリになる。)
  3. Gitの場合は、分散型なのでメインとなるマスタリポジトリが消滅しても安心。
  4. SVNだと、各フォルダに隠しフォルダ「.svn」が作成されてしまう。うっとおしい。
    Gitの場合は、親フォルダにのみ隠しフォルダ「.git」が作成される。
  5. SVNでできていた連番のリビジョン番号での管理がGitではできなくなる
  6. Gitはコミットはローカルリポジトリに対してだからスピーディ。
続きを読む »

README.mdファイル。マークダウン記法まとめ

by codechord. 6 Comments

つい先日から、ようやくgithubを使い始めました。
gitのことはあまり勉強してないので右も左もわからず、とりあえず、公開されてるレポジトリのクローンを作りまくってニヤニヤ閲覧しています。

で、そろそろ自分もリポジトリを作りたいなと思って、作り方を調べてたんですが、
README.md」ファイルというものの存在を知りました。

拡張子「.md」?何の事かさっぱりわからず、ドットモジュールって勝手に思ってたんですけど、全然違いました。「マークダウン」の略でした///

続きを読む »