TEST CORDING » JavaScript正規表現 怒濤の100サンプル!!

2014/02/11 3087 users 怒濤

文字列の検索や置換をするときに便利な正規表現をまとめてみました。簡単なものから順に並べているので、実行しながら遊んでみてください。 正規表現ってなに？ 正規表現とは、とある文字を文字列内から探し出すための照合パターンみたいなものです。 どんなときに使うの？ 文字を整形したり、取得した文字列から目的の文字を抽出するときに使います。最近のエディタでは検索機能に加えて正規表現での検索や置換も対応している... 続きを読む

TEST CORDING » ブロガー必見！？わかりやすい日本語を書くための4冊

2013/08/10 67 users ブロガー必見 ためし 良書 4冊 指針

「分かりやすい日本語を書くための」なんて文章家の方から怒られそうで大それた記事ですが、私自身はまだ分かりやすい文章を書けたためしはありません。習得中です。取り敢えずド素人の私が「こんな感じのことを考えて書けばいいのか」くらいの指針を持てた書籍を紹介します。 ※ Amazonのレビュー数が多いもの、評価が高いものを適当にポチって何冊か読んだ結果です。 ※ 他に良書と言われる書籍をご存知の方がいらっし... 続きを読む

TEST CORDING » tmlib.js入門用チュートリアル！避けゲーを作ってみよう

2013/08/02 11 users ゲー

上から落ちてくるモンスターを避ける、というシンプルな避けゲーを作るチュートリアルです。tmlib.jsでサクッと作っちゃいましょう。最終的に作るゲームは以下のサンプルになります。 tmlib.jsって何？ tmlib.jsとは、制作者のブログから引用すると「簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリ」です。詳しくは資料が用意されてるので以下へ。 tmlib.js... 続きを読む

TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編

2013/07/14 3087 users 怒濤 Socket.IO MongoDB 都度 node.js

node.jsを使ったサンプル集です。ゲーム制作でサンプル作ってたら溜まったので整理がてら公開します。node.jsをローカルで実行できる環境を作ってない方は、「初心者でも安心！？Node.jsをインストールするなら仮想サーバを使おう」を参考にしてみてください。また、socket.ioやmongoDBを利用する際は、都度インストールしてください。 node.js基礎 001: hello,worl... 続きを読む

TEST CORDING » 基礎からのSass – Sassによる効率的CSSコーディングまとめ

2013/07/11 151 users Sass Compass CSS プログラミング 言語

今まで作成してきたエントリーをまとめてみました。ライブラリ化についても言及しています。Sass の機能的に書いてないものもあるので、今後追加するかも。よく一緒に紹介されるCompassについては言及していませんのでご注意を。 Sassって何？ Sass とは、よりプログラミングに近い書き方ができる言語です。今まで書いていた CSS の書き方を見てみましょう。 div.container h1 { ... 続きを読む

TEST CORDING » オンラインゲーム(MMORPG)の作り方基礎 – リソースや帯域を節約し、不正ユーザを防ぐには

2013/06/29 3087 users タメ MMORPG 帯域 リソース 端末

ローグライク風アクションオンラインゲームを制作しながら気づいたことやタメになった記事のまとめです。運用時の規模が10人から100人ほどの規模を想定しています。小規模オンラインゲームにおいて考慮しなければならない点をひと通りまとめてみました。 オンラインゲームの概要 オンラインゲームってなんぞや オンラインゲームはざっくり言えば、他の端末やPCとデータをやり取りしながら進行するゲームです。 「こんな... 続きを読む

TEST CORDING » node.js(socket.io) x tmlib.jsを使ってオンラインゲームを作ってみた！

2013/06/17 60 users Twitter tmlib.js node.js サンプル

node.js(socket.io) + tmlib.jsでオンラインゲームを制作中です。制作中なので、満足に動くかどうかもまだ分かっていない状態ですが、ひとまず公開しておこうと思います。今後処理を追加したり、アップデートしたらTwitterにて呟いていきます。 サンプル 実際に以下のURLからプレイできます。 オンラインローグライクゲーム：b-rogue スマートフォン(iPhone4s:iOS... 続きを読む

TEST CORDING » JavaScriptでローグライクを作ってみた

2013/05/22 2020 users ローグライク iPhone JavaScript サンプル

JavaScriptを用いてローグライクを作ってみました。ブラウザ上で動くので、iPhoneやパソコンでも動きます。 厳密にいえばローグどころかローグライクですらないので、ローグライク風(？)なゲームって言ったほうがいいでしょうか。 実際に遊ぶ 以下のサンプルを動かせば、どんな感じに動くのか分かるかと思います。 フル画面で動かしたい場合は、以下のURLにアクセスしてください。iPhoneの場合は、... 続きを読む

TEST CORDING » 初心者でも安心！？Node.jsをインストールするなら仮想サーバを使おう

2013/03/04 3088 users node.js 仮想サーバ MacBookAir 安心 初心者

Node.jsを触っておきたいなと思いつつ、MacBookAirにインストールする時えらく苦労したのでもっと簡単にローカルで実験する方法を探していました。タイトル通り、仮想サーバを作ればすんなりインストール＋サンプル実行までできたのでメモとして残しておこうと思います。 Node.jsって何？ Node.jsとは、JavaScriptで作られたサーバ環境です。他の環境だと、サーバでアプリケーションを... 続きを読む

TEST CORDING » JavaScriptでオーディオビジュアライザを作ってみた

2013/03/01 3088 users tmlib.js ライブラリ 一言 コレ プログラム

Web Audio API という、ブラウザ上で音を解析したり鳴らしたりできるプログラムを利用してオーディオビジュアライザを作ってみました。 使用しているライブラリ @phi_jp さんが作成された、 tmlib.js を利用しています。このライブラリは……一言で「コレができる」ってものではなく、いろんなことができます。本当に。 Web Audio API にも対応されたということで使っています。... 続きを読む

TEST CORDING » この順番に読んだらOKだった！ド素人からJavaScriptを理解するための10冊+α

2012/11/05 1212 users 順番 ド素人 jQuery JavaScript 10冊

JavaScriptを学んでおきたいな、と思いつつもいったいどの本から読めば「言語として」JavaScriptを習得できるのか分かりませんでした。ド素人の状態から、jQuery内のコードが読めるくらいには理解できるようになります。私自身がド素人状態から始めて検証したので、間違いはないかなと思います。jQueryなどのチップス集などで満足するのではなく、本格的にJavaScriptを理解したいと思っ... 続きを読む

TEST CORDING » Sass:共通のプロパティをまとめる様々な方法をCSSと比較してみた

2012/10/17 3087 users Sass Orange font-size color CSS

今回のエントリーでは、 Sass による共通のプロパティや設定をどうまとめるかについて書いてみます。結局どうやって書くのが安定しているのか？ ということを試行錯誤する際に参考にしてみてください。 CSS 元となるCSSソース div.container h1 { color: orange; font-size: 20px; } div.container ul { font-size: 20px... 続きを読む

TEST CORDING » Twitterサービス制作者必見！TwitterAPIでURL,ハッシュ,リプライ先を一発で取得する方法

2012/10/15 18 users Twitter TwitterAPI ハッシュ 短縮 URL

今回のエントリーでは、 TwitterAPI から実際にアクセスする外部リンク先の URL や、ハッシュ、リプライ先を取得してみます。ツイート情報を取得するだけだと、リンクは全て t.co の短縮 URL に置き換わってます。そのため、公式の Twitter のような表示はできません。”ある機能”を使って URL 情報を取得したついでに a タグに変換してリンクを実装してみます。 TwitterA... 続きを読む

TEST CORDING » 作業効率化！作業内容の”見える化”を進めるツール『Manic time』

2012/10/11 3087 users PDCA 必須 教訓 ツール サイクル

今回のエントリーでは、作業効率を上げるために必須な、作業内容を把握するためのツールを紹介したいと思います。 作業効率を上げるには作業内容の”見える化”が必須 作業効率を上げるとは、 PDCA(Plan Do Check Action) のサイクルを回すことで得た教訓を活かすことです。つまり、作業内容を把握し、何を目的として行動したのかが分からなければチェックし、アクションに移すことすらできません。... 続きを読む

TEST CORDING » 集中して作業する！騒音をシャットアウトする”道具”まとめ

2012/10/10 3087 users 騒音 道具 一片 まとめ ヤバイ

納期が近づいてきて、「本気で集中しないとヤバイ！」なんて状況になってしまう方はいませんか？　そもそもそんな状況を作るのが悪い……なんて言われてしまうかもしれませんが、「ほんの一片でも集中を乱す騒音」をシャットアウトしたい時はあるのではないでしょうか。そんな方のためのエントリーとなります。 遮音性について 遮音性は NRR と表記されています。数値が高ければ高いほど遮音性が高いものとなります。ただし... 続きを読む

TEST CORDING » Twitter新サービス：『とりわけ！ ～あなたのツイートをブログのようにまとめます』始めました

2012/10/09 3087 users Twitter ツイート 要約 ハッシュ あなた

今回のエントリーは、Twitterを利用したサービスである『とりわけ！ ～あなたのツイートをブログのようにまとめます』を紹介したいと思います。ツイートのハッシュでカテゴリ分けして表示するというサービスです。Twitterでのハッシュの意味とは、世界に広めたい内容であったり、何について書いているのか分かりやすくするためのものでしか無かったと思います。少し着眼点を変えて、ハッシュが「要約の意味」である... 続きを読む

TEST CORDING » Sass：CSSで描く図形36種をたった一行で書けるようにしてみた

2012/10/04 3087 users Sass 図形 CSS 一行 アニメーション

Sass を使って一行で図形を書いてしまうというエントリーです。前回のエントリーである「Sass：CSSで描く図形13種をたった一行で書けるようにしてみた」に引き続き、少し複雑な図形21種類を追加しました。 どんな感じで実装しているのか、というのは前回のエントリーに任せて、今回は書けるようになった図形の一覧を見ていただこうと思います。また、基本図形とは違ってホバー時のアニメーションには対応していま... 続きを読む

TEST CORDING » WordPressのpluginを使わないページネーションを改造する方法

2012/10/02 3087 users Plugin WordPress ページネーション 参考元

今回は WordPress のページネーションについてのエントリーです。プラグインを使わない方法については Google で簡単に検索できますが、いざ自分用に改造しようとするとどうするのか分からない！、といった方向けです。 参考元のサイト sparklette http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-... 続きを読む

TEST CORDING » Sass：CSSで描く図形13種をたった一行で書けるようにしてみた

2012/10/01 19 users Sass 正方形 図形 Photoshop CSS

テスト用の表示や遊び心で図形を描きたい、ということがたまにあります。そんな時にお絵かきソフトを使わずに CSS で図形を書くことはないでしょうか？わざわざ Photoshop を開くのも面倒だと感じてしまう方！ Sass でさっと図形を書いてしまいましょう。 一行で描いてしまう いきなりですが、以下のソースを見てください。これは正方形を描く関数です。 div.sample { @include s... 続きを読む

TEST CORDING » Sassで未対応ブラウザへのCSS3使用は警告＆自動修正！

2012/09/12 53 users Sass warn ファイ 未対応ブラウザ 処置

Sass を使用するといかに便利に早く確実に案件をこなせていけるかは、十分に今までの記事でお分かりになられたかと思います。しかし、まだまだSass の力はこんなものではありません。未対応ブラウザに対する処置はどんなに小さい案件でもつきまとう「無駄な」作業です。これをできる限り自動で対処できるようにしたいと思います。 @warnで警告を発生させる！ @warn とは、 @warn が実行されたファイ... 続きを読む

TEST CORDING

2012/08/28 3088 users

Sassでは@mixinの他に、@functionという処理をまとめる機能があります。しかし、通常SassではCSSの機能をまとめることがほとんどであるため使う頻度は少ないかもしれません。@mixinと@functionの違いをざっくりとまとめてみます。 @mixinの役割 @mixinは、CSSの記述を助ける役割が主になっています。CSSで重複した記述を@mixinでまとめることで同じ記述をなく... 続きを読む