天才プログラマー・オードリーさんがたった200行で効果的なアプリを作れる秘訣
天才プログラマー・オードリーさんがたった200行で効果的なアプリを作れる秘訣 オードリー・タン台湾デジタル大臣との対話 - 未曾有の危機に幅広く使える未来思考（後編） 2021年1月19日、『コロナ vs. AI 最新テクノロジーで感染症に挑む』（翔泳社刊）が発売されました。医師の起業家からAIの研究者・ITの先端技術コンサルタントによって執筆されており、コロナ対抗策としてのAIの社会実装事例・AI研究事例・医療研究事例をわかりやすくまとめられています。今回本書の発売を記念して、収録されている台湾のデジタル大臣、オードリー・タンさんへの特別インタビューから、一部内容をご紹介します。株式会社キアラ 代表取締役の石井 大輔氏による寄稿です。（前編はこちら）。 石井：今回の私の質問は少し技術的なことです。オードリーさんは天才プログラマーとして有名です。GitLab Taiwanのエンジニア友人か
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
Googleフォームで自動返信システムをサクッとつくる (1/4)
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
無料で使えるHTML5 JavaScriptゲームエンジンまとめ
HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。 Cocos2D JavaScript (http://cocos2d-javascript.org/) Crafty (http://craftyjs.com/) enchant.js (http:
40分で覚える！jQuery速習講座 (3/6)
【10分目：基礎編】 jQueryでHTML/CSSを操作する jQueryにはさまざまな機能がありますが、Web制作者にとっては「HTML/CSSを操作するためのライブラリー」と考えておけば間違いありません。jQueryでHTML/CSSを操作するには、次のような書式でjQueryの命令を記述します。 jQueryの命令は豊富にあり、たとえばhtml()という命令を使うと、セレクターで指定した要素の内側を変更できます。 ▼サンプル1（スクリプト部分） $("p#first").html("<strong>変更後</strong>"); 上記のサンプルコードを実行すると、id属性に「first」が設定されているp要素の内容が、<strong>変更後</strong> に変わります。 ▼サンプル1（元のHTML部分） <p id="first">変更前</p> ▼サンプル1（実行結果） <p
ASCII.jp：たった4行で電話が作れるAPI「Twilio」とは？ (1/2)｜Twilioではじめるクラウド電話開発
Twilioは簡単に言うと、「Webから電話を簡単に操作できるAPI」です。ほとんどの連絡をメールやSNSで済ませるようになった昨今、「いまさら電話？」と思った方もいるかもしれません。しかし、エンジニアの視点から、またサービス企画の視点から見て、Twilioは実に多くの可能性を秘めたAPIなのです（筆者もまた、その可能性に注目している1人です）。 Twilioを使うと何ができるのか？ どんな可能性があるのか？ その魅力を、連載を通じて紹介しましょう。 まずはTwilioを体験してみよう Twilioとはどんなものなのか？ まずは手元の携帯電話などから以下の番号に電話をかけてみてください（通話料がかかります）。 電話につながると、ややぎこちない女性の声でメッセージが流れたと思います。実はこの自動応答システム、Twilioを使って、たった4行のコードだけで実現されています。 <?xml ver
enchant.jsで懐かしのインベーダーゲームを作ろう (1/4)
インベーダーゲームは、画面の上部から迫ってくる多数の敵キャラクター（インベーダー）を打ち倒すゲームです。敵を全滅させるとゲームクリアになり、逆に、敵が画面下まで到達するか、自機が撃たれるとゲームオーバーになります。インベーダーゲームの成功を受けて、ナムコの「ギャラクシアン」「ギャラガ」「ギャプラス」など、インベーダーゲームをベースにしたゲームが数多く登場しました。インベーダーゲームの成功により、今日のゲームの基礎が築かれたといってもよいかもしれません。 今回のJavaScriptラボは、前回に引き続き「enchant.js」を使って、インベーダータイプのゲームを作ります。インベーダーと同じように最初にすべての敵が画面に表示され、敵をすべて撃てばクリアになります。クリアすると再度敵が出現し、自機が撃たれるまで延々とゲームを繰り返します。 ブロック崩しからインベーダーゲームへ インベーダーゲー
iPhoneがPhoneGapで簡易電子書籍リーダーに (1/4)
HTMLやCSS、JavaScriptでスマートフォンアプリを開発できるフレームワーク「PhoneGap」。今回はPDFを使った簡易電子書籍ビューアーアプリを作ります。 PDFを表示するだけならiOS標準のSafariでできますが、ページ内にPDFを埋め込んで表示するにはインラインフレームを使う必要があります。インラインフレームを使ってPDFを表示すると、拡大・縮小などの操作がうまくできず、使い勝手がよくありません。そこで、今回はPhoneGapのプラグイン「ChildBrowser」を利用して、ページ内にPDFを表示します。 ChildBrowserは、PhoneGapのページとは独立してWebページを表示するプラグインです。PhoneGapが親、ChildBrowserが子の関係になり、ChildBrowserを呼び出して終了するとPhoneGapに戻ります。アプリを切り替えるのではな
サンプルで学ぶjQuery Mobileまとめ（前編） (4/5)
カウントバブルの追加 class属性「ui-li-count」 リスト内に数値を記述し、class属性「ui-li-count」を付けた要素で包むと、リスト項目の右側にカウントバブルが表示されます。Webサイトの新着情報の件数を表示する場合などに利用できます。 ■サンプル19[HTML] <ul data-role="listview"> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> <li><a href="#page2">list<span class="ui-li-count">10</span></a></li> <li><a href="#page2
消えゆく日本文化、若者につなげ ニコニコ動画に“再生”の灯 (1/4)
今年で5周年を迎えた投稿動画サービス・ニコニコ動画。日常のクスッと笑ってしまう場面から、自作の歌や曲、ダンスや演奏など、数えきれないほどのジャンルの作品が投稿され、10～20代の支持を受けて成長してきた。 そんなニコ動で今、面白い現象が起こっている。若者文化とは縁遠そうな伝統芸能系動画が驚くほど支持されているのだ。中でも最も有名なのは、昨年8月に投稿された「【邦楽BadApple!!】傷林果」（しょうりんか）だ。 三味線の杵家七三（きねいえ なみ）さんをはじめ、箏、尺八、太鼓という和楽器で構成された「杵家七三社中」が、ニコニコ動画で非常に人気の高い同人ゲーム「東方Project」（以下“東方”）のBGMをアレンジした「Bad Apple!! feat. nomico」を演奏している。なぜ伝統芸能のプロが同人ゲームのBGMなのか。そしてなぜ音もPVもこんなに“本気”なのか。 その「先生、なに
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCII.jp：西畑一馬のjQuery Mobileデザイン入門