Developers Summit 2012 で使用したスライド 後半を抜き出し少し更新したものはこちら: http://www.slideshare.net/dynamis/kanazawajsnextRead less
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
こんにちは、デコミィチームディレクターの小出です。 「デコミィ」は、NHN Japanで運営している媒体の中では珍しく「10代女性」をターゲットにしているリアルタイムサービスです。そのサービスにマーケティング関連業務担当として関わる私は、ペルソナ形成や、媒体運営ノウハウの構築を目的とした10代女性へのインタビュー活動を行なっています。 今年は既に50人以上もの女子高生にインタビューを行い、彼女たちの思考・行動特性に迫まってきました。今回は、その中で見えてきた「アクセス解析やランキングではわからない女子高生のスマホ事情」をお伝えします。 フィーチャーフォンからiPhoneへの買換え需要と、その意外な理由。 これまでお会いしてきた女子高生の中の49名に対しては、所有している携帯電話の種類について伺っています。彼女たちの所有する携帯電話の内訳は以下のようなものでした。 フィーチャーフォン: 35
DDN は 音楽 ・ 映像 に関する デジタル アート を中心に情報ミックスを配信中
2012年02月16日11:36 Webアプリ 画像のアップロードをかっこよく実装する 久しぶりのブログですこんにちわ!最近は主になめこを栽培しております。 なめこ図鑑46%まできたお (*´ω`*)— ささたつ(Tatsuya Sasaki) (@sasata299) February 13, 2012 ということで、今回は画像のアップロードをかっこよくやる方法について紹介します。 画像のアップロードというか、アップロードしたいファイルの選択ですかね。Twitterだとこんな感じのカメラ画像があって、それをクリックするとファイル選択画面になるんです。 アップロードしたいファイルの選択って、ふつーに実装するとこんな感じのデザインです。かっこよくない!! まぁこんな感じですよね。 そうじゃなくて、Twitterみたいな感じで画像をクリックするとシャキーン!とファイル選択画面が出てくる、そうい
近年来,项科新项中国科技创新领域发展迅猛,技创进展不仅在人工智能、目中大数据等技术方面取得了重要突破,国境也涌现出许多具有潜力的得突项目。其中,破性一项针对农业领域的项科新项科技创新项目近期在中国境内取得了突破性进展,为提高农业生产效益、技创进展解决农村劳动力短缺问题带来了新的目中希望。 助力农业现代化:智能无人农机的国境新尝试 传统农业生产模式中,农民往往需要花费大量时间和精力进行耕种、得突播种、破性收割等工作,项科新项由此带来了人力成本的技创进展增加和劳动力短缺的问题。为了解决这一难题,目中该科技创新项目通过利用现代技术手段,开发出一种智能无人农机。这种农机拥有多种传感器和先进的导航系统,可以根据农田环境的变化自主规划行进路线,并完成各种农业作业任务。相比传统农机,智能无人农机不仅具备了更高的作业效率,还减轻了农民的劳动强度。 科技与农业的融合:物联网打破信息壁垒 在传统农业生产中,农
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類(ライトグレー・ダークグレー・グレー)の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
シンプルで、Responsive Web Designにも対応、フルカスタマイズも可能な画像ギャラリーを実装するjQueryのプラグインを紹介します。 CSS3非対応ブラウザでの動作も考慮しています。 Glisse.js [ad#ad-2] Glisse.jsの主な特徴 Glisse.jsのデモ Glisse.jsの使い方 Glisse.jsの主な特徴 Glisse.jsは、CSS3アニメーションの美しいエフェクトを使った画像ギャラリーで、Responsive Web Designにも対応しており、実装は簡単でフルカスタマイズも可能です。 キーボードナビゲーション CSSのフルカスタマイズ キーフレームを使ったCSS3アニメーション 7種類の移行エフェクト 異なる画面サイズに最適化 iPhone, iPad対応 Androidももうすぐ完全にサポート 対応ブラウザ Firefox 4+ O
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
“もしあなたが7歳の時にプログラミングを学べたらどれだけ素晴らしい事でしょうか?” githubが子供向けのプログラミングセミナーを行うCoderDojoという企画に参加するという記事がブログに投稿されていました。まずはHTMLやCSSから始まりつつ、PHPやゲームプログラミングなどに発展していく予定のようです。 CoderDojo公式サイトを見るとバッヂとベルトという認定の仕組みもあるようです。 黄色がBasic、青がJunior、赤がSenior、そして黒がMasterとのこと。バッヂ獲得の要件はJSの黄色バッジだと下記のようなものだそうです。 次のことについて学習し説明する。:変数、データ型、関数、配列 次の技術を使ったWEBサイトを作成する。:alerts document.write バッヂを集めてセッションに参加すると次はベルトという資格が認定されるとの事。githubのサンフ
作りたいものが決まったら調査をしましょう。特に技術的なことについてです。 ここで言う技術というのは、「自分が作りたいことが世の中の利用可能な技術で実現できるか?」を意味します。 その際に「自分のスキル」と「世の中の技術」を分けて考えるといいでしょう。 アイデアを実現するために「利用可能な技術が無い」ケースはあきらめればいいですし、 「あるけれども自分にスキルがない」ケースは頑張ればいいのです。 設計は紙に書いちゃうくらい簡素なもので最初はいいかもです。個人個人のスタイルがあるので。 ユースケースという「ユーザーがシステムに対して振る舞う行為」を図にすることと、 扱うデータには何があるのかを列挙して構造化することは最低限行います。 2. 開発 いよいよ開発です。Perl、Python、Ruby、PHP... 何を使うにしろ以下の知識が必要になると思います。 言語に対する理解 WAF DB フ
まずはこの画像をクリックしてご覧ください。 上記画像は話題のPinterestですが・・・ もしアナタが男性なら、 この辺りに目が行ってないですか? もしアナタが女性なら、 この辺りですか?(浅はかでしたね・・・女性はもっと違うところですね) そんなの当たり前? じゃあなぜだと思います? 色分けすると・・・ 目立つのは左の黒っぽい2点か、右上の赤1点じゃないでしょうか。 人の目は色で判別しがちと思われますが、デザインは色だけじゃないって事ですよね。 これらの例は少し強引な意味づけしてますが、大筋はおわかりになると思いますので、その体で話を進めます。 もちろんこれらの例は、本能的に視線が誘導させられてるのですが、 この視線誘導には色んな手法がありますよね。 Z / Fの法則だとか、色の問題だとか、あとは上記のように性別的な問題。 Webサイトデザインの場合 左上や
先日、SEOのスキルセットについてのツイートをしました。 私は、他の職種からSEOになる場合、アクセス解析の方かWeb制作全般を幅広く行われてきた方が一番と思っています。幅広い範囲が求められるSEOのスキルセットに一番近いのはアクセス解析と思いますし、小さなWeb制作会社などで営業から制作まで大量にやってきたような人も適正が高いと思うのですよね。 この件を掘り下げて書いてみようと思います。 SEOのスキルセット SEOの専門家(人工リンク中心ではない)、特に高いレベルのお客様にSEOを提供する側になるには、検索と検索行動、検索エンジン周りの知識は当然の事として、Webデザイン、HTMLコーディング、ユーザビリティ等のWeb制作に関わる広い知識が必要になります。 Web制作上の知識が無くてSEO観点でのサイト改善を提案できるはずがありません。 SEOは、Web制作の方が作られたWebサイトを
月間PVは160億、来訪者は1億3000万人のソーシャルサイトをご存知だろうか。レディ・ガガも使っている「Tumblr」である。その25歳のCEOが来日した。 PVは月間160億。月に1億3000万人が来訪するソーシャルサイト。国防総省やレディ・ガガもページを持っている……。 いや、FacebookやTwitterのことではない。日本では非常にマイナーだが、米国では大ブレイク中の「Tumblr」だ。 2月14日、CCI主催のSocialMediaWeekに来日した25歳のCEO、David Karp氏の講演を聞いた。それなりに大きな会場だったが、席の埋まり具合はだいたい半分の100人程度。しかもスーツは1割もいない。膝にMacbook Airをのせたアルファな感じのブロガーがほとんどだ。米国で著名人がこぞって使い始めブレイクしているTumblrだが、日本での認知の低さを如実に表している。
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ:日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
http://www.quora.com/Node-js-Ruby-Python-who-wins-in-5-years を読んでて「勝利条件としてより多くの”スタートアップ”に選択されること」という話がでてたけど、そもそも今は何が採用されているのか状況がよくわかたっていなかったので調べた。 スタートアップ? 一般(自分の周辺)に「ウェブサービス」みたいな呼称されているもの。消費者向けというかなんというか、企業向けシステムとか、ソーシャルゲーム単品とかは含めないことにした なんでスタートアップ?(小規模な企業) 企業が大きくなってくると、いろんな領域で必要なことがあってこの企業は→このプログラミング言語みたいなひもづけができなくなるので 項目は =企業ではなく=サービスでわけた 順番、国内外は適当。できるだけ知名度のありそうなサイトを選んだ いわゆるサーバーサイドのアーキテクチャの話(それ
パソコンのキーボードを打つ自分の姿を鏡で見たことはありますか。筆者は偶然、見てしまったのです。ひどい猫背にびっくり仰天しました。日々の生活で、少しでも猫背を直す方法はないでしょうか。 元オリンピック・ショートトラックスピードスケートの選手で、現在はウォーキングキャスターや温泉ソムリエとして活躍する勅使川原郁恵(てしがわら・いくえ)さんに、オフィスでできる超簡単エクササイズを教えていただきました。 ■猫背と骨盤のゆがみは連動している 勅使川原さんは、猫背がもたらす体調不良や体の悪いクセについて 「ダイエット、おなかぽっこり、骨盤のゆがみ、O脚、X脚、けんこう骨のゆがみ、肩こり、腰痛、頭痛、疲れ顔、老け顔、冷え性、むくみ……これらの現象の多くは、『猫背』が原因です。 猫背になると呼吸が浅くなり、首から頭が前に飛び出します。骨盤がゆがんで下半身の血流がとどこおり、全身にコリや疲労感を覚え
はじめに 統計解析の手法を学ぶのに、教科書を読むのは素晴らしい学習方法です。 しかし、教科書で理論的なことを学んだだけでは、統計手法を使いこなせるようにはなりません。 統計解析手法を身につけるには、実際のデータについて手法を適用し、パラメータを変えるなどの試行錯誤を行い、結果を考察するというような経験を積むことが大切です。 それでは実際のデータをどうやって手に入れましょうか? 実験や調査をして実際のデータを得るのは大変でお金もかかります。 幸運なことに、世の中には適度なサイズの自由に使えるデータがたくさん存在します。 例えば、統計言語 R には、100以上ものデータセットがデフォルトで付属しています。 ただし、不幸なことに、それらのほとんどは英語で説明が書かれています。 英語は、いつかは乗り越えなければならない壁ですが、最初のうちはちょっと避けて通りたいところです。 というわけで、今日は、
こんにちはこんにちは!! Webプログラミングしてますか! よく「PHPはセキュリティがダメ」とか言われてるよね。 でもそれって、べつにPHPが悪いんじゃなくて、 たぶん、セキュリティとかが、まだよくわからない人が多いだけなんじゃないかな。 がんばって勉強しようと思っても、なんだか難しい理屈が並んでいたりするしね…。 なので今日は、セキュリティ対策について、 「これだけやっとけば、わりと安全になるよ」ってことを、初心者むけに、大雑把に書いてみます! 理屈がわからなくても、最初はコピペでも、 なにもやらないより、やったほうがきっとマシになる! 1. XSS対策 動的なものを表示するとき、全部エスケープすればokです! (NG) あなたの名前は <?= $name ?> ですね! ↓ (OK) あなたの名前は <?= htmlspecialchars($name, ENT_QUOTES) ?>
HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日本語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など
設置が簡単でカスタマイズも簡単にできる、ページの上部・下部・中央・角からアニメーションで通知パネルを表示・非表示するjQueryのプラグインを紹介します。 noty [ad#ad-2] notyのデモ notyの使い方 notyのデモ デモではnotyのさまざまな通知パネルを楽しむことができます。 下記は全てアラートパネルですが、他にもError, Success, Confirmが用意されています。
写真や Evernote のノートのように、どんどんと溜まっていく情報をなんとか記憶の旗のもとに掌握したいという気持ちは、まったく自然でしょう。しかしはたしてそれは現実的なのでしょうか? ときおり、「Evernoteのなかをゴミ化しないために整理しよう」といった記事を読むのですが、整理するあいだも増えてゆく情報を掌握するために投入する苦労は並々なりません。 それを全部やめてしまったとしたらどうでしょう?ぜんぶ捨てる写真整理術 - ハードディスクに写真を残さない | ガジェット☆ダイスケ - gajetdaisuke.com 大別すると、クラウドで事足りるものと、ローカルで保持しておくものに分かれます。 ブログ用素材なんかは明らかに前者ですよね。ソーシャルメディアなんかは投稿した時点で目的完了ですから、そのあともローカルに残しておくかどうかは物によりけり。 対して、ローカルに保持しておくもの
実は、完成を心待ちにしていた人が多かったのではないだろうか。1月4日、待ちに待った同人ビジュアルノベル「かたわ少女」完全版がついにリリースされた。タイトルが示す通り、本作は主要登場人物がほどんど障害者という、前代未聞の設定の18禁ビジュアルノベルだ。両足の膝から下がないツインテール少女。ろうあ者の生徒会長、両手がないけど絵を描くのが好きな少女……。物語は、先天性の心臓疾患を抱える主人公の視点で進んでいくことになる。 そして、本作のもう1つの特徴が、開発スタッフがほぼ日本人以外で進められたこと。開発の始まりは10年以上前に遡る。きっかけは、英語圏で著名な画像投稿掲示板である「4chan」に投稿された「こんなエロゲーあったらいいな」という趣旨の、日本の同人誌(RAITA氏の同人誌『Schuppen Harnische』)のスキャン画像だった。障害を持つヒロインたちの、たった1ページだけのイラス
Dependency-free notification library Features Dependency-free UMD Web Push Notifications with Service Worker support Named queue system Has 11 layouts, 5 notification styles, 5+ themes Custom container (inline notifications) Confirm notifications TTL with timeout option Progress bar indicator for timed notifications Supports css animations, animate.css, mojs, bounce.js, velocity and others 2 close
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く