斉藤 祐也(基調講演)、Simuraiのセッションを除き、JavaScriptトラック(ルームA)・CSSトラック(ルームB)に分かれてセッションをおこないます。 ※Simuraiのセッションは英語でおこなわれます。(逐次通訳あり)
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
WordPressテーマ「Simplicity(シンプリシティー)」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル 手軽に収益化 ブログの主役はあくまで本文 カスタマイズがしやすい 以下で詳しく説明します。 Simplicityは、とにかくシンプルなWordpressテーマを作ろうという考えの下作成しました。 テーマの名前「Simplicity」には以下の意味があります。 単純 簡単 容易 簡素 質素 飾り気のない よく言えばシンプル、悪く言えば地味なテーマです。 余分な飾り気をすべて取り除き、ユーザーが自ら自由なスタイルで後からカスタマイズしやすい土台となるように考えて作りました。 もちろんそのままでも十分使用できます。 検索エンジンへの最適化(SEO)
どうも。 1月に入社したばかりの、データ分析担当のn_maoです。 と言いながら、最近はHTMLとjsばかりいじっております。 それはそれで楽しいです。 さて今回はデータ分析のざっくりとした仕事内容と、その分析にかかる手間を省くツールをご紹介します。 データ分析の仕事 まずは私の行っているデータ分析という仕事の内容をご紹介します。 私の主な仕事は大きく分けて4つです。 売上げ、会員登録数などの簡単な集計&自動レポーティング データベースからの知識発見(いわゆるデータ分析) 分析結果をもとにした企画立案 実施された企画の効果検証 あくまで私個人の仕事内容であり、データ分析者全員に当てはまるわけではありません。 アルゴリズムの研究開発の方や、インフラ寄りの方もいらっしゃるでしょう。 ですが、同じ職種の方で業務範囲が被っている方も少なからずいらっしゃると思います。 これら4つの業務の中で一番時間
【HTML5 Conference基調講演】村井純・及川卓也が語る「IoT」でWeb技術はどう変わっていくのか? 馬場 美由紀(HTML5 Experts.jp編集部) 2014年10月にHTML5が勧告され、いまやHTML5はさまざまなデバイスに浸透しつつある。まさに「Web is Everywhere」。Webはごく普通の、どこにでもあるものへと変化している。 2015年1月25日に開催された「HTML5 Conference」では、この「Web is Everywhere」をテーマに慶應義塾大学 環境情報学部長・教授の村井純先生とGoogleの及川卓也さんが基調講演を行った。村井先生と及川さんはWeb技術をどう見ているのか。 村井先生が松葉杖姿で登壇!それができたのもWebの力? なんと村井先生は松葉杖で登壇。「生まれて初めての松葉杖です」と冗談交じりに、米国で足の指を骨折したときの
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
ここ数年、モノのインターネット: Internet of Things(IoT)が盛り上がってきています。今年のCES 2015(世界最大級のIT&家電見本市)でも IoTが大きなテーマとなったようですね。具体的なプロダクトやサービスも数多くローンチされ、今年はIoT元年ともいわれています。 「IoTとは何なのか」「なぜ今注目を集めるのか」「Web of Thingsとは」について解説します。そこから今後のIoTと、我々Webクリエイターがどう関わるのか、についても考えてみましょう。 モノのインターネットとは? IoTの本質を考える Internet of Thingsとは、さまざまなモノがインターネットに接続され、センサーなどによりデータを測定したりコントロール可能にする概念だと言われています。モノがインターネットに繋がっていろいろできるということですが、その実体はなんなのでしょう。単に
サンプルのデモページ サンプルで添付している html/lemmatizer_sample.html のデモページです。 JavaScript Lemmatizer デモページ 適当に英語の単語の変化形を入力、品詞を選択して(未選択でも可)、「Search Lemma」ボタンを押しますと、入力単語の原形を出力します。 使い方と取得できる単語の原形の戻り値 実際のメソッドの使い方や、取得できる戻り値は以下の通りです。js/lemmatizer.js をロード後、Lemmatizer インスタンスを生成して、Lemmatizer#lemmas か Lemmatizer#only_lemmas メソッドを使用します。 // initialize Lemmatizer. var lemmatizer = new Lemmatizer(); // retrieve a lemma with a pa
Text Input Effects Simple ideas for enhancing text input interactions Haruki First Name Last Name Email Hoshi Name Street Town Inspired by Andrej Radisic's Jawbreaker input field Kuro Username Website Invitation Code Jiro Cat's Name Dog's Name Hamster's Name Minoru First Name Middle Name Last Name Yoko Street City Region Hideo Username Email Password Kyo What's your email? Akira First Name Last Na
「マネして学べる」プログラミング学習サイト『シラバス』。 メインのWEBデザイン編とWEBアプリ編のコースでは、20あまりのステップを踏んでHTML/CSS、WordPress、Ruby on RailsなどでレスポンシブなWEBサイト を開発し、公開できる。 社内eラーニングシステムとして公開され、多くの企業が利用しているという。 今回は、プログラミングは難しそう…という人も気軽にトライできる、もう1つのカテゴリー「公開コース」を使ってみた。 ■登録作業は簡単 まずは、シラバスのトップページにアクセス。 プログラミング学習サイト『シラバス』 https://cyllabus.jp/courses/publics メールアドレスとパスワードを設定するだけの簡単作業で、すべてのコンテンツが見られるようになる。 しばらくすると、登録完了メールが来た。 「現在シラバスはβ版の試験運用中です」と
PHPにはディレクトリを取得するための変数や定数が用意されていますが、どれを使えばいいのか分からなくなりませんか? 概要 今回は「example.com」というサイトを例に、ディレクトリ名を取得する変数や定数の値を調査しました。実際の使用例も用意してあります。なお、途中に出てくる dirname() は、引数に指定したファイル・ディレクトリへのパスに対する親ディレクトリのパスを返す関数です。 環境 アクセス先 http://example.com/ http://example.com/knighthawk/ http://example.com/knighthawk/pavehawk.php ドキュメントルート /home/mcgee/www/example/public_html/ (/knighthawk/に深い意味はありません。単なるディレクトリ名です。) 一覧 アクセスしたURL
Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework What is this? Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft. Stay updated, Subscribe to Bootsnipp mailing list (only important updates will be sent, your email is never shared or sold to anyone else)
追記: ライブラリとして切り出しました pdf.jsを使ってスライド表示するライブラリを書いた | Web Scratch どういうもの https://azu.github.io/slide/DOMQuery/sourcemap.pdf というPDFファイルを読み込んで表示しています。 普通のHTMLスライドのようにウェブページとして公開することも出来ます。 例) https://azu.github.io//slide/DOMQuery/ 作った経緯 mozilla/pdf.jsを使えばPDFをブラウザ上で表示出来るので、これを使ったプレゼンテーションツールとかあると面白そうな気がしたのが始まりです。 こういうのが欲しい理由としては以下のような感じでした。 Deckset みたいにPDFしか配布用のフォーマットがないものがある Deckset自体は便利なので使いたい でもSlideSh
とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
今日はスクレイピングの話をします。 今回のターゲットは三菱東京UFJダイレクト。金融機関もウェブサービスを提供するようになり、金にまつわる情報を電子化しやすくなりましたが、かれらが API を提供しているわけではないので、私たちのほうで取得・加工をしてやる必要があります。今やウェブサイトであれば当然のように JavaScript を使っているわけなので、いわゆる mechanize、つまり HTML の解釈をおこない、リンクのクリックやフォームの送信をシンプルに実装するようなやり方でのスクレイピングはすでに無理筋だといえます。 もちろん今日においてはブラウザオートメーションという方法がすでにありますので、これを利用してやれば、なんの憂いもなく実際に人間が使うようなブラウザをプログラマティックに操作することができます。現在は Selenium WebDriver がデファクトで、これが使用す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く