プログラミングが楽しく学べそうなのでご紹介。 FIGHT CODEでは、JavaScriptでロボットの動作を記述し、他ユーザーのそれと対戦させることができるようだ。 自分のロボットを作るにはGithubでログインし、簡単なコードで攻撃したり、移動したりといった命令を書いていくだけだ。 ドキュメントも充実しているし、なにより他のユーザーと戦うことで熱くなれるので、プログラミングの入門として悪くないのではなかろうか。気になる人はちょっと覗いてみてもいいですな。
![JavaScriptで遊べるロボット対戦コンテスト『FIGHT CODE』 | 100SHIKI](https://cdn-ak-scissors.b.st-hatena.com/image/square/40c1923e61df99e29b338afa2893b31867446b8d/height=288;version=1;width=512/http%3A%2F%2Fwww.100shiki.com%2Fdocs%2F201303%2F24_logo.gif)
プログラミングが楽しく学べそうなのでご紹介。 FIGHT CODEでは、JavaScriptでロボットの動作を記述し、他ユーザーのそれと対戦させることができるようだ。 自分のロボットを作るにはGithubでログインし、簡単なコードで攻撃したり、移動したりといった命令を書いていくだけだ。 ドキュメントも充実しているし、なにより他のユーザーと戦うことで熱くなれるので、プログラミングの入門として悪くないのではなかろうか。気になる人はちょっと覗いてみてもいいですな。
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />
【JavaScript】Node.jsでリアルタイムなものを創る チャットで試すVo.1 2月 26, 2013 admin 読了: 約 5 分 最近創っているアプリでコメント機能を創ったのですが、phpやajaxで創ると更新しなければ他の人のコメントが見られず不便ですよね。 ajaxでsettimeoutで10秒とかで取得しても画面がちらつくのが微妙という事で、Node.jsでリアルタイムチャットを創る事にしました。 macでの環境構築 以前の記事でwindowsでの環境構築については書いたのですが、mac book airを晴れて購入しまして、macの環境構築についてもざっくり書いておきます。 macでのインストールまでに参考になった記事 Node.js インストールログ 下記のコマンドが使えなかったので、node.jsは公式サイトからインストールしてしまいました。 $ sudo po
Capybara-Webkit+Cucumber+Sinon.JSでJavaScriptのテストはここまで変わる:フレームワークで実践! JavaScriptテスト入門(5)(1/3 ページ) しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、RubyでWebKitをヘッドレス化するフレームワーク、受け入れテストの記述が日本語でできるツール、スタブやモック、スパイが使えるライブラリを組み合わせたテスト方法などを紹介。 Capybara-WebkitとCucumberとSinon.JSを利用したJavaScriptのテスト 本連載の最終回となる今回は、これまでの連載のようなJavaScriptのロジックを単体テストするのではなく、Webブラウザ上の操作と、それによって動作
【JavaScript】JavaScriptフレームワークの実践的な使い方Vol.2 CoffeeScript/Require.js 2月 18, 2013 admin 読了: 約 5 分 JSフレームワークに関する概要を以前記事を書いたのですが、それの続編として、管理やリファクタリング・テストなどに使うのは何が良いか などなど、それに必要な知識や参考書籍、情報をまとめておきます。 以前の記事 【JavaScript】これだけ見ればJavaScriptフレームワークの概要を理解できる、フレームワーク毎の利点・使い方まとめ 目的 console.log,alertなど意外のテスト リファクタリングをするために 大規模開発のためのJavaScriptを学ぶための運用方法を学ぶため 参考例 サイボウズといえばJS界隈では知らない人がいないと思いますが、あまちゃんさんが元々いた企業です。サイボウズ
localStorageとpostMessage postMessageを使うことで、サーバを経由しないで異なるドメイン間でのデータ受け渡しが可能だということを説明しました。またlocalStorageを使うことで「サーバには送られないがブラウザにのみ保持されるデータ」を気軽に作ることができるようになりました。 「他サービスのid」ならまだしも「どんなサービスを使っているのか」までも秘匿(ひとく)したいケースは実際にはまれでしょうから、そこまでストイックな、完全にクライアントサイドでのみデータを保持するサービスにこだわる必要もないでしょうが、方向性としては興味深いと思います。クライアントサイドでのみデータを保持するということは、ブラウザのキャッシュをクリアしたらデータが消えるということでもあります。そんな状況は好ましくないでしょうから、localStorageに本当に永続化が必要な情報を入
【追記】 「mixiページ」サービス終了に向けてのスケジュールは、2020年8月31日に全てサービス提供終了としていましたが、以下の日程に変更します。 ・2020年9月7日11時頃 モバイル版mixiページ終了 ・2020年9月14日11時頃 PC版、スマートフォン版mixiページ終了 終了時刻は前後する場合がございます。 ダウンロード機能はPC版スマートフォン版mixiページ終了と同時の2020年9月14日11時頃に終了いたしますので、「mixiページ」データのダウンロードをご希望の方は、お早めにダウンロードをお願いします。 以上、どうぞよろしくお願いいたします。 【追記】 終了予定の「mixiページ」とは、SNSmixi全体の中の一部特定サービスの名称でございます。 SNSmixiの全てが終了するわけではございません。2020年8月31日以降も引き続きSNSmixiはご利用いただけます
【開発環境】コーディングを超高速化するためにDreamweaverからSublime text2+Emmetに乗り換えた時のメモ 11月 18, 2012 admin 導入はめちゃくちゃ簡単 下記記事でインストールまで簡単に。 直近だと下の2つ見ておけば大体おk Permalink to Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ [Event][SublimeText]第0回 Sublime Text 2 勉強会 で Emmet について話してきた ダウンロード Dev Builds 初期設定等は上記記事にある設定をリスペクトしました笑 Packageのインストール Sublime TextはHTML5等パッケージをインストールする事で使えるようになります。 Dreamweaverではファイルを新規作成時、H
Photoshop Javascript ToolsはPhotoshopの自動操作を行うためのJavaScriptライブラリ集です。 知らなかったのですが、Photoshopの自動操作を行うスクリプトはJavaScriptで記述可能です。今回はそのためのツール集とも言えるPhotoshop Javascript Toolsを紹介します。 インストールします。PhotoshopのScriptsディレクトリ内にコピーします。 スクリプトメニューに取り込まれました。 一例です。ガイド作成します。 こんな感じにラインが引かれました。 エラーを見るとJavaScriptっぽいのが分かります。 主な機能は二つで、ガイドラインを引くライブラリとフォント名を表示したり変更できるライブラリになります。また、その他プログレスバーのUIやカレンダーを作成する、JPEGへのエクスポートを行うライブラリなど小さなツ
iPhone対応&cuePlaylistを使って簡単に実装した話はこちら http://d.hatena.ne.jp/koba04/20121030/1351526950 YouTubeで好きなアーティストの曲を連続再生させたいって思ったとき、すでに「君のラジオ」だったりYouTube本家にDiscoとしてあるわけですが、Last.FMユーザーとしては自分のTop50のランキングからランダムにいい感じに曲を選んで欲しいと思ったりしています。 なので、そういうものを作ろうかなと思いながら全然形に出来ていないので、ちょびちょびアウトプットしながら作っていこうかと思います。 今回はここまで http://koba04.com/youtube/index.html ざっくり必要なもの YouTubeの動画を連続再生させる。(←今回ココ) Last.FMのアカウントからランキングを取得して、そのアー
福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7sかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
テーブルレイアウトで作成されたWebページやtableタグで組まれた表の値をスクレイピングして取り出すときには、JavaScriptでtableの列や行を走査して、値を取得していく必要があります。 そこで、JavaScriptでtableタグの列や行を扱う方法をまとめてみました。 2011.02.01追記 コメント欄での指摘で気がつきましたが、行と列が逆でしたので修正しました。 table要素を取得する ページ内のtable要素を取得するには、document.getElementsByTagName関数が利用できます。tableタグにIDがふられている場合には、document.getElementByIdも利用することができます。 // ページ中にある0番目のtableを取得する。 var tbl = document.getElementsByTagName("table").ite
jQueryを使って簡単にHTMLやCSSを変更したり、追加したりすることができます。今回は、HTML、CSSをjQueryで変更する命令についてご紹介します。jQueryを使用したJavascriptは、どのHTML要素を操作するか指定する『セレクター』と、操作する『処理』が基本です。今回も前回使用しました『ready関数』を使ってサンプルを交えてご紹介します。 テキスト HTMLで使用される『テキスト』をjQueryで制御するには『text()』を使用します。 変更 『text()』うを使用してテキストを変更するには『text()』の括弧の中に変更後のテキストを記述します。 Javascript $("p#first").text("テキスト変更後"); デモ 取得 『text()』の括弧内に何も記述しなければ指定したセレクターのテキストを取得できます。 $("p#first").t
ベルギーのフリーランスWeb開発者のMathias Bynens氏が書いたJavaScriptの変数名についての興味深い実験結果が公開されていました。彼はUnicodeのどんなグリフ(絵文字)が識別子として利用できるのかECMAScriptの仕様を見てみることにしたそうです。彼の実験によるとなんと図1のような変数名はすべてJavaScriptとして正しいとのことです。 絵文字を変数名として利用するというアイデアを実際に使う機会はかなりまれでしょうが、ブラウザによる解釈の誤差を除くと動作する正しいコードということになります。マルチバイトを許容する言語ではユニットテストのテストメソッド名に日本語を使うようなアイデアも見かけるようになってきていますが、ソースコードの可読性と表現力について考えなおしてみる機会になるかもしれません。 図1 グリフを使ったJavaScriptのコード例 URL:htt
もう暑くってェ グッタリしちゃってェ…んじに🐈にゃーん🍓🫐🍅🌽🍈🍆🥒🍇🦝 @uupaa (ε・◇・)з だらだら書いたよー http://t.co/fK9KaHRq 「CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー」 2012-01-22 01:37:32
http://www.meteor.com/ で公開された Meteor.js を少し触ってみました。TechCrunch なんかでも話題になっていましたね。 Meteor.js は JavaScript によるウェブアプリケーションフレームワークですが、クライアントサイドでもサーバーサイドでもない、"Isomorphic" なフレームワークです。 コンセプトとしていくつか特徴があるのですが、その最たるものは "Reactive Programming" で、モデルやセッションなどのストレージを更新するとその更新内容がリアルタイムに、そのアプリケーションを開いている全クライアントに伝わるようなアプリケーションを簡単に作ることができます。 この辺は実例を見るのが早いです。 http://www.meteor.com/examples/leaderboard ここにある動画では、あるブラウザで
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで&nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
はじめに node.jsが熱いですね。 これからnode.jsを勉強したり、node.jsで何かアプリケーション作ってみたいという人のために、node.jsの環境構築(インストール)系のエントリを集めてみました。 サーバサイドJavaScript Node.js入門posted with amazlet at 14.02.16清水俊博 大津繁樹 Jxck 小林秀和 佐々木庸平 篠崎祐輔 高木敦也 西山雄也 アスキー・メディアワークス 売り上げランキング: 247,116 Amazon.co.jpで詳細を見る プラットフォーム別に分けてみましたので、お好きな環境でnode.jsに触れてみてください。ざっと眺めてみた感じ、Macでやるのが一番簡単みたいです。 Windows + cygwin Windowsでもcygwinを入れてあげてればnode.jsは動きます。 node.jsをWindo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く