3つの応用編コースがリリース

ブラウザ上でHTML5のコーディング力を測ることができるオンライン試験、
「第二回全国統一 HTML5実力テスト」の応用編コースがリリースされました。

新しい問題形式で作られた今回の試験問題は、知識の実用性を重視しています。
難易度が上昇したと同時に、より実務的なスキルチェックができるようになります。

「第二回全国統一 HTML5実力テスト」は、株式会社ディー・エヌ・エー、日本マイクロソフト株式会社、グーグル株式会社の協力を得て実施されます。

新たな問題形式をご紹介

新設されたHTML/CSS、JavsScript、iOS/Androidの応用編コースの問題は、従来の選択式をなくしています。
今回の問題は、候補解答から解答を選んで空欄に埋める穴埋め式と、
その場でコーディングする記述式のふたつのタイプに分けられています。

• 穴埋め式問題

  候補解答から解答を選んで、ドラッグ&ドロップで空欄に埋めることで解答できます。
  また、ダブルクリックで、自動的に空欄に当てはめることもできます。

• 記述式問題

  問題の説明と例の挙動に沿って、コードを補完して解答します。
  記入したコードはシステム側で自動に採点されます。

なお、応用編コースはPCのみの受験になりきます。
受験すると、自分の得点のほか、偏差値や順位が結果として表示されます。

より実践的に実力を試すことができる、
HTML5実力テスト 応用編
いますぐ受験して実力を判定しましょう！

「第二回全国統一 HTML5実力テスト」応用編コース概要

URL ： http://jsdo.it/event/html5cat/2012/autumn
開催期間：2012年1月30日～
問題作成 ： 面白法人カヤック
問題監修 ： 株式会社ディー・エヌ・エー

3つの応用編コースがリリース

ブラウザ上でHTML5のコーディング力を測ることができるオンライン試験、
「第二回全国統一 HTML5実力テスト」の応用編コースがリリースされました。

新しい問題形式で作られた今回の試験問題は、知識の実用性を重視しています。
難易度が上昇したと同時に、より実務的なスキルチェックができるようになります。

「第二回全国統一 HTML5実力テスト」は、株式会社ディー・エヌ・エー、日本マイクロソフト株式会社、グーグル株式会社の協力を得て実施されます。

新たな問題形式をご紹介

新設されたHTML/CSS、JavsScript、iOS/Androidの応用編コースの問題は、従来の選択式をなくしています。
今回の問題は、候補解答から解答を選んで空欄に埋める穴埋め式と、
その場でコーディングする記述式のふたつのタイプに分けられています。

• 穴埋め式問題

  候補解答から解答を選んで、ドラッグ&ドロップで空欄に埋めることで解答できます。
  また、ダブルクリックで、自動的に空欄に当てはめることもできます。

• 記述式問題

  問題の説明と例の挙動に沿って、コードを補完して解答します。
  記入したコードはシステム側で自動に採点されます。

なお、応用編コースはPCのみの受験になりきます。
受験すると、自分の得点のほか、偏差値や順位が結果として表示されます。

より実践的に実力を試すことができる、
HTML5実力テスト 応用編
いますぐ受験して実力を判定しましょう！

「第二回全国統一 HTML5実力テスト」応用編コース概要

URL ： http://jsdo.it/event/html5cat/2012/autumn
開催期間：2012年1月30日～
問題作成 ： 面白法人カヤック
問題監修 ： 株式会社ディー・エヌ・エー

Talking about jsdo.it, in January, we've added some new features for our code editor.

• Keyboard shortcuts

  We've added keyboard shortcuts for tab switching, saving and reloading preview.

  Ctrl + 1 / ⌘ + 1 Switch to README tab
  Ctrl + 2 / ⌘ + 2 Switch to JavaScript tab
  Ctrl + 3 / ⌘ + 3 Switch to HTML tab
  Ctrl + 4 / ⌘ + 4 Switch to CSS tab
  Ctrl + 5 / ⌘ + 5 Switch to File tab
  Ctrl + 0 / ⌘ + 0 Switch to Properties tab
  Ctrl + s / ⌘ + s Save manually
  Ctrl + r / ⌘ + r Reload preview

  And the shortcuts can be also referred from the Keyboard shortcuts button in the bottom right corner.

• Auto-saving

  After the code is edited, it'll be automatically saved. If you want to turn off this feature, you can just turn off the checkbox named as Auto in the top right corner. And please pay attention that if the auto-saving is turned off, the preview will not be reloaded automatically after saving.

  

• Fixing display on iPhone & iPad

  We've fixed display problem that occurs when the editor is zoomed in/out on iPhone and iPad. Now you can use iPhone or iPad to edit your code.

• Color scheme

  If you click the button in the bottom of the code editor, a color scheme panel will show up. And you can choose any theme you like as your default choice. You can also change the setting in your account setting page.

  

• Thumbnail uploading

  Now we make it able for users to upload any picture they want for the code thumbnail. You can do it in code properties tab. And any JPG, PNG or GIF picture in 465px * 465px size can be used.

  

Why not have a try right now?

With our best wishes

ということでjsdo.itでは、今月1月、
コードエディターにいくつかの新機能を追加しました！

• ショットカットキー

  ショットカットキーにタブ切り替え、保存、リロードを追加しました。

  Ctrl + 1 / ⌘ + 1 READMEタブ
  Ctrl + 2 / ⌘ + 2 JavaScriptタブ
  Ctrl + 3 / ⌘ + 3 HTMLタブ
  Ctrl + 4 / ⌘ + 4 CSSタブ
  Ctrl + 5 / ⌘ + 5 ファイルアップロードタブ
  Ctrl + 0 / ⌘ + 0 コード詳細設定タブ
  Ctrl + s / ⌘ + s 手動保存
  Ctrl + r / ⌘ + r リロード

  エディターの右下にある「Keyboard shortcuts」ボタンにまとめております。

• 自動保存機能

  コードが編集されたら、自動的に保存されます。
  自動保存を無効にしたいときは、右上の Auto というチェックボックスをオフにしてください。
  ただし自動保存が無効の場合、保存後の自動リロードも無効になります。

  

• iPhoneとiPadでエディターの表示崩れ修正

  iPhoneとiPadでエディターを拡大・縮小したときに表示が崩れる問題を修正しました。
  現在、iPhoneとiPadでコード編集・保存できるようになっております。

• テーマ設定

  コードエディターの下にある三角のボタンを押すと、テーマ設定のパネルが現れます。
  その中から自分の好みのテーマを選んで、デフォルトに設定できます。
  アカウント設定のページでも設定できます。

  

• サムネイルアップロード

  コードのサムネイル画像に使いたい画像をアップロードできるようになりました。
  コード詳細設定タブの中でアップロードできます。
  横465px、縦465pxのJPG、PNG、GIF画像が使用可能です。

  

是非新機能をお試しください！
ことしも良い一年になりますように！

Code view page

• Positioning of Diff Button
  You can see the difference with the forked file by clicking View Diff button on the right-top corner.

• Brushing Favorite Feature
  Now you can add/remove favorite without reloading the page.

• Adding Post to QA Button
  If you have any question about the code, you can directly post it to the QA section from the view page.

Editor

• Uploading of Files Other than Images and Audios Enabled
  The limitation is opened, and you can post any file besides images and audios. You can also upload XML files.

• Upload Capacity Up to 1MB
  The upload capacity is upgraded from 100KB to 1MB, which times the previous by 10.

• Changing Precompiler UI to Pulldown Menu
  The language assignment, which was done by comment, can be made directly from the pulldown menu now.

• Supporting SCSS, LESS in CSS Precompiler
  We added SCSS, LESS support to CSS precompiler.

• Supporting Compass in CSS Precompiler
  We add the Compass alternative when you want to use SCSS. @import also supported.

• Supporting TypeScript in JS Precompiler
  We've added TypeScript option, which is a language developed by Microsoft.
  

• Supporting Zen Coding
  Now you don't need to write each HTML tag, because the convenient Zen Coding tool is available in our editor.

• Supporting Markdown
  Now you can use Markdown syntax in README. The usage can be referred from here.

• Linking Gist
  By linking Gist, you can control the version of the code. (To link, you can find the "Save to Gist" link from the Save button's options)
  

User page

• Portofolio
  You can choose the codes that you want to show off. And you can also see a lot of parameters about yourself here.

• Add Awarding History to Portofolio
  We've added awarding history in the past contests to the portfolio page. You can even make use of the portfolio in job finding.

• Enabling Adding Social Account to Portfolio (Twitter, Facebook, Google+, Github)
  To add social account icon, you can go to the setting page to set your social accounts. To can make the setting from here!

• Supporting Markdown
  Not only the README of your codes, you can also write Markdown in your profile, discussions.
  

• Adding Email Address
  Now you can add your email address in the setting page. By this, you can recieve the information of new events and mail magazines from jsdo.it.
  You can add your email address from here!

Others

• Updating Helps (in Japanese and English)
  We've also updated the helps together with the new features listed above.

• Applying SSL to Part of the Website
  To enhance the security, we've applied SSL to some part of our website.

• Code Capturing Done by PhantomJS instead of Firefox
  By this, we have reduced a lot of time when capturing the codes.

• Notifications from jsdo.it And Desktop Notification
  We've added notification features. Desktop notification is also available.
  

How about these new features? Do you find any that you haven't found before?

By this, we are going to say bye-bye to 2012. We wish a happy new year to you. And welcome to use jsdo.it also in 2013! Looking forward to your code posts!

コード詳細ページ

• Diffボタンの配置
  右上のView Diffボタンをクリックすると、Fork前のコードとの差分が見れます。

• Favorite機能改善
  Favoriteの追加・削除操作もリロードせずに何回でもできるようになりました。
  

• コード詳細ページにQAへ投稿するボタン追加
  コードについて質問がある場合、詳細ページから簡単にQAへ投稿することができます。

エディター

• イメージとオーディオファイル以外もアップロード可能に
  ファイル制限が開放され、イメージとオーディオファイル以外もアップロード可能になりました。XMLファイルのアップロードも可能です。

• アップロード容量が1MBに拡大
  コードごとのアップロード容量が100KBから1MBへ10倍に拡大しました。

• PrecompilerのUI変更（プルダウンメニューに）
  以前コメントで行なっていた言語指定が、プルダウンメニューで即変更可能に。

• CSS PrecompilerにSCSS、LESS対応
  CSS PrecompilerにSCSS、LESSを追加しました。

• CSS PrecompilerにCompass対応
  SCSSを使う場合に、Compass付きの選択肢も追加しました。@importもできます。
  

• JS PrecompilerにTypeScript対応
  マイクロソフト社が開発したTypeScriptも言語指定項目に加わりました。

• Zen Coding対応
  HTMLタグをいちいち書かずとも良い、便利なZen Codingツールも実装されました。

• Markdown対応
  READMEにMarkdown文法を使うことが可能になりました。書き方はこちらをご参照ください。

• Gistとの連携
  連携でバージョン管理ができるようにりました。（エディター画面のSaveボタンの横から「Save to Gist」できます）
  

ユーザーページ

• ポートフォリオ機能
  自分の一番人に見せたいコードを選べます。そして自分のパラメータもいろいろみれます。

• ポートフォリオに受賞履歴追加
  過去に開催したコンテスト等の受賞履歴をポートフォリオに追加しました。ポートフォリオを自己PRに活用することもできます。

• プロフィールにソーシャルアカウントを掲載できるようになった（Twitter, Facebook, Google+, Github）
  設定画面で設定したら、プロフィールにソーシャルアカウントのアイコンが現れます。
  ソーシャルアカウント登録はこちらから！

• Markdown対応
  コードのREADMEだけではなく、プロフィール、Discussionsの質問と回答もMarkdownで書けるようになりました。
  

• メールアドレス登録
  設定画面でメールアドレスを登録することができます。jsdo.itのイベント情報やメルマガを配信します。
  メールアドレスの登録はこちらから！

その他

• ヘルプのアップデート（日、英）
  上記新機能の実装とともに、日本語と英語のヘルプも一新しました。

• 一部ページにSSLを導入
  セキュリティ向上のため、SSLを一部のページに導入しました。

• コードのキャプチャ処理を従来のFirefoxからヘッドレスブラウザPhantomJSで行うように
  いままでのキャプチャ処理の待ち時間を大きく削減しました。

• jsdo.itからのお知らせ機能、デスクトップノーティフィケーション
  お知らせ機能を追加しました。デスクトップノーティフィケーションを利用するのも可能です。
  

振り返りは以上です！
いかがだったでしょうか。
気が付かなかった機能はありましたか?

これにて2012年アップデートまとめを終わりにします。
それでは、良いお年を！
2013年もjsdo.itをよろしくお願い致します！

For details about CSS Programming, please refer to this article.

============================================

Hello, this is the jsdo.it team! Thanks for using our service!

To answer the passionate encouragement from the CSS "HENTAI" Programmers in the world, we jsdo.it team have prepared a Christmas present!

jsdo. it さんがただのまとめだけで終わるわけがないと信じてる。

— Jun Sugimoto (@understandard) December 18, 2012

Translation: I believe that jsdo.it won't simple write a summary post only.

12/25の、 #jsdoit の中の人が超絶テクを駆使したCSS Programmingの実装とともに発表するまとめ記事が今から楽しみでなりません。

— 高梨ギンペイ (@ginpei_jp) December 18, 2012

Translation: I can't help wanting to see the fantastic CSS Programming example and the summary post made by #jsdoit 's staffs, right now!

We love jsdo.it.

— げこたん(@GeckoTang) December 18, 2012

Translation: We love jsdo.it.

まさかjsdo.itチームさんが穴開けることなんてないですよ。企業背負ってますから

— 1026 (@No_1026) December 24, 2012

Translation: So there's no possibility that jsdo.it team don't make it. They have to take the responsibility of a company.

Wow, really passionate encouragement...isn't it? (･ω･`；)

Anyway, we wish everyone a merry Christmas and a Happy CSS Programming!

============================================

jsdo.itチームです！いつもありがとうございます！

世界中のCSS "HENTAI" Programmersの熱い声援にお応えして、
jsdo.itチームからクリスマスプレゼントをご用意しました！

jsdo. it さんがただのまとめだけで終わるわけがないと信じてる。

— Jun Sugimoto (@understandard) December 18, 2012

12/25の、 #jsdoit の中の人が超絶テクを駆使したCSS Programmingの実装とともに発表するまとめ記事が今から楽しみでなりません。

— 高梨ギンペイ (@ginpei_jp) December 18, 2012

We love jsdo.it.

— げこたん(@GeckoTang) December 18, 2012

まさかjsdo.itチームさんが穴開けることなんてないですよ。企業背負ってますから

— 1026 (@No_1026) December 24, 2012

あ、熱い声援...ですよね...?!(･ω･`；)

それでは皆さん、メリークリスマス＆ハッピーCSSプログラミング！

• Support syntax highlight and auto indentation of JSX, CoffeeScript, and LESS.
• Code Folding
• Search/replace

Press ctrl-q or click on the gutter to fold a block, again to unfold.

Search/replace keybindings are:

Ctrl-F / Cmd-F

Start searching

Ctrl-G / Cmd-G

Find next

Shift-Ctrl-G / Shift-Cmd-G

Find previous

Shift-Ctrl-F / Cmd-Option-F

Replace

Shift-Ctrl-R / Shift-Cmd-Option-F

Replace all

• JSX, CoffeeScript, and LESS のシンタックスハイライトとインデントに対応しました
• コードの折りたたみ
• 検索／置換

ブロックを折りたたむには ctrl-q を押すか左の数字のところをクリックしてください。もういちどやると戻ります。

検索／置換のキーバインドは以下の通りです。

Ctrl-F / Cmd-F

検索開始

Ctrl-G / Cmd-G

次を探す

Shift-Ctrl-G / Shift-Cmd-G

前を探す

Shift-Ctrl-F / Cmd-Option-F

置換

Shift-Ctrl-R / Shift-Cmd-Option-F

全て置換

• The new languageJSX create rapid JS.
• The remarkable scriptCoffeeScript affects next generation ECMAScript.

To use JSX, put "// #!jsx" on top of JS code.

To use CoffeeScript, put "#!cooffeescript" on top of JS code.

JSXを使うにはJSコードの先頭に「// #!jsx」を記述してください。

CoffeeScriptを使うにはJSコードの先頭に「#!cooffeescript」を記述してください。

Touch the "Properties" button next to the code title, in code edit view.

You'll see a dialog to edit code properties,
check the "Private" checkbox, and "Save".

"Private" code won't appear in code ranking, nor in your followers dashboard( or mypage). It will only be visible by yourself.

Use it for drafts, or secret hacks:)

Enjoy!

コード編集画面のタイトルの横にある
[properties]ボタンをクリックします。

コードの編集パネルが表示されますので
visibilityの項目の、privateにチェックを入れてください。

saveボタンを押すと、パネルが閉じます。
finish editingボタンでコードを保存してください。

privateモードのコードは
非公開となり、コード一覧ページや、
他のユーザーのダッシュボードにも表示されません。

下書き中や、privateに保存しておきたいコードに、
ご活用ください。

link to http://jsdo.it/kyo_ago/otyt#hoge is location.hash === '#hoge'

http://jsdo.it/kyo_ago/otyt#hoge形式のURIでlocation.hashに#hogeが設定されます

One topic would be a simple image viewer like this:
http://jsdo.it/sugyan/cuxY

This script pulls various pics with a certain tag from instagram. Modify tags portion after URL's /tags/ and you will be able to get designated pics.

Detailed document is available here:
http://instagr.am/developer/endpoints/

jsdo.itではお手軽にforkできるコードがたくさんあります。普段なかなか趣味のコードが書けない方も、この機会に普段温めているネタをコードに落としてみませんか？

例えばお手軽画像ビューワー作成を作成するならこちら。
http://jsdo.it/sugyan/cuxY

Instagramから指定のタグが付けられた写真を取ってくるサンプルコードです。URLの/tags/の後にタグを指定すると、指定されたタグの付いた写真のURLを取得できます。

それ以外のドキュメントはこちら。
http://instagr.am/developer/endpoints/

Microsoft MIX11 opening keynote featured original SVG animation on HTML5 "SVG Girl" developed by jsdo.it core team. It's a flip-book type animation running at 10 SVG frames per second.

http://www.beautyoftheweb.com/#/experience/SVGgirl
http://blogs.msdn.com/b/cdndevs/archive/2011/04/12/svg-girl.aspx

Videos links:
http://live.visitmix.com/　(watch from 01:41:50)
http://www.youtube.com/watch?v=xwck69UvGt8

http://itpro.nikkeibp.co.jp/article/NEWS/20110413/359360/
http://plusd.itmedia.co.jp/pcuser/articles/1104/13/news026.html
http://gihyo.jp/news/report/01/mix11/0003
http://gamebiz.jp/?p=9389

動画リンク:
http://live.visitmix.com/　(01:41:50よりご覧ください)
http://www.youtube.com/watch?v=xwck69UvGt8

We have added a new feature to list ancestor codes and child branches with a "fork tree". When the code has forked version or itself is a child branch of an existing code, then "tree" link will be displayed on the info, so that you can track down the fork history.

Along with creating this feature, we have started rolling out jsdo.it API.

jsdo.it API's documentation

The domain is "api.jsdo.it", but we have set the Access-Control-Allow-Origin header to make access possible via ajax. Try building your own original fork tree.

このtreeページを作るため、jsdo.it APIを用意しました。
jsdo.it API's documentation
ドメインは"api.jsdo.it"ですが、Access-Control-Allow-Originヘッダを設定しているのでajaxで取得することもできます。
是非面白いfork treeを作って投稿してみて下さい!

これまでforkしたコードはタグが空になっていましたが、fork元のタグを継承するように変更いたしました。

You can apply the same feature for existing older tags, by adding '?view=design' to the end of JavaScript URL.

外部埋め込みプレーヤーのタグ発行時に初期値をプレビューにするか、コードにするかを選択できるようになりました。

これまでに発行したタグもJavaScriptのURL末尾に「?view=design」を付けることでプレビュー表示に変換することができます。