Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
Search Console (サーチコンソール)の登録・使い方完全マニュアル
「Googleサーチコンソールに登録したけど、ほとんど使っていない…」 「そもそもGoogleサーチコンソールを使って何ができるんだろう…」 そんな悩みを持っているWebサイト制作者、担当者の方に伝えたいことがあります。 Google Search Console(サーチコンソール)は、Webサイトの運用や成長において必須のツールです。 しかし、「そもそもGoogleアナリティクスとの違いは何だろう？」と疑問を抱いたり、PV（ページビュー）やUU（ユニークユーザー）などの分かりやすい数値が見られるわけでもなかったりと、登録したまま活用しきれていない人が多いのも事実です。 そこで今回は、Webサイト運営に欠かせないGoogleサーチコンソールを使いこなせるようになるために、登録方法や機能の解説、使い方などをご紹介します。 Googleサーチコンソールとは Googleサーチコンソールは、Go
HTML5開発に適したIDEを探す（その2）「WebStorm」
前回のVisual Studioに引き続き、今回もHTML5/CSS3/JavaScriptによるWebシステム開発をサポートしたIDEを紹介します。今回は元々IntelliJとしてよく知られているIDEで、その中のWeb開発だけを抜き出したWebStormを紹介します。Web開発に特化しているだけあって、数多くの便利な機能が搭載されています。 プロジェクトの選択肢が多い HTML5でプロジェクトをはじめようと思った場合の選択肢が多数あります。 それぞれ目的に合わせて選択するのが良いでしょう。それぞれの目的に合わせてファイルが自動的に配備されるので、合っていないプロジェクトテンプレートを選ぶとファイルの配置が把握できない状態になるかも知れません。 メイン画面 メイン画面は次のようなデザインになります。 初期設定時にカラーリングテーマやキーバインドを選択できます。使いやすいものを選択してくだ
HTML5開発に適したIDEを探す（その1）「Visual Studio」
コンパイルを伴うプログラミング言語を使った開発では一般的にIDEを使います。.NETであればVisual Studio、JavaであればNetBeansやEclipseなど、iOSであればXcodeを使います。対してWebフロントエンドの開発となると、テキストエディタがベースだという方も多いのではないでしょうか。 しかし最近のIDEは進化しており、Webフロントエンド開発にマッチした機能を搭載しはじめています。これらを知ることでより効率的な開発がのぞめるようになるでしょう。 ということで今回から主だったIDEについて、フロントエンド部分の開発（コード記述、デバッグやテストなど）の観点から、どのような機能が用意されているのかを調べていきたいと思います。初回となる今回はVisual Studioです。今回はVisual Studio Community 2013を使ってみます。 プロジェクトベ
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
公式SNSボタンは重い！コピペでできるCSSのSNSボタンで軽くする
ブロブ等のWebサイトにFacebookやtwitterなどのSNSボタンを設置していますでしょうか？記事に「いいね！」を押してもらったりシェアしてもらうのに大切なアイテムですね。各SNSの公式サイトにもボタンの設置方法等が紹介されていますし、多くの方が利用しているのではないかと思います。 WordPressをご利用の方であれば、『WP Social Bookmarking Light』等のプラグインを利用して簡単にSNSボタンを設置することが可能です。 しかし公式のSNSボタンを利用することによるデメリットも存在します。SNSボタンを設置してあるページを読み込む（表示させる）のに、とても時間がかかり重いのです。Facebookの「いいね！」ボタンは特に重いような・・・。ユーザビリティやSEOの面でもページ表示速度が重要視されるようになり、「0.1秒でも早くしたい！」という方にとって無視す
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
著作権侵害をせずに、芸能人の写真を思う存分使える『ブログ用の写真検索さん』が凄い！しかもクリックされれば自分の報酬にもなります。 - SONOTA
アイドルや俳優の写真を、無断で掲載してしまっているブログって多いですよね。本来、そういった行為は著作権や肖像権の侵害…。下手をすると芸能事務所から、損害賠償請求をされてしまうような事態にも陥ることにだってなりえます。 芸能人の画像は非営利ならブログに載せていいのでしょうか？ ダメです、許可無く無断で載せると違反行為となります。音楽事務所などがルールなどに基づいて、貼り付けを許可しているもの以外は肖像権侵害行為・著作権侵害行為となります。 いくら好きでもダメなものはダメ： だから、いくらAKB48が好きだからって勝手にブログに掲載してはダメです。そして、篠原涼子がいかにカッコ良かったからといっても、ドラマ『アンフェア』の映像を勝手にブログに掲載してはいけないのです（刑事役がハマっていましたよね）。 合法的に画像を使ってます： ここまで読んで、おまえも違法に芸能人の画像を掲載しているじゃないか
Webサービスのプログラミングに必要なことのだいたいは、スクレイピングに学んだ - Line 1: Error: Invalid Blog('by Esehara' )
この記事を読み始める前に Rubyでやるんだったら、ちょうどそういう本が出ているから、その本買えばいいのではないでしょうか。 Rubyによるクローラー開発技法 巡回・解析機能の実装と21の運用例 作者: るびきち,佐々木拓郎出版社/メーカー: SBクリエイティブ発売日: 2014/08/25メディア: 大型本この商品を含むブログ (1件) を見る はじめに プログラミングを勉強し始めて、だいたい基礎的な文法を覚えたあとに、次に何をしようかな、と悩む人も結構多いみたいで、明確に「これを作りたい」という場合は、それを作ればいいとは思うんですけど、場合によっては、別段作りたいものが無く、漠然としたプログラミングをしたい、という熱意によって勉強しているという人もいるのではないかと思います。 で、もちろん「作りたいものがないのに、プログラミング勉強してどうするの」という意見もあるかとは思いますが、往
PHP、かつてWebで人気だった言語が下火になりつつある | readwrite.jp
今月頭頃にPHPの勉強を始めた時、編集者や知り合いと目標を目指して燃えていた。 しかしながら技術に詳しい人からの反応は常に「アレのどこがいいの?」というものばかりだった。 PHP、かつてパーソナルホームページの略であるとされ、その名前から元々シンプルかつカスタマイズが容易なWebサイトを作るために生まれてきたこの言語では、Webページにインタラクティブな要素を盛り込むことができる。 サイト上でPHPを用いることで、ページを静的なものから、投稿するとすぐにそれが反映されるBlogの様に動的なものにすることが出来る。 私がPHPに興味を持った最初の理由はこれだ。Blog構築で人気のプラットフォームであるWordPressは、Blogの見た目や機能をカスタマイズするためのテーマエンジンにPHPを用いているため、もしPHPを使えるのであれば、Blogのかなり細かいところまでいじることが出来る。 P
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう 佐藤歩（株式会社サイバーエージェント） この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Material Designという視覚的言語 Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。 それを実現するため、伝統的なグラフィックデザインとテク
Concise.CSS·軽量でSASSベース、絞り込まれた機能だけを提供するフロントエンドフレームワーク MOONGIFT
ここ数年フロントエンドフレームワークが熱いです。Bootstrap、Zurb Foundationをはじめ、多種多様なフロントエンドフレームワークが登場しています。プログラマにとっては便利な反面、意外とデザイナーには好まれていないのではないでしょうか。 作法に則って記述している分には良いのですが、ちょっとでも逸脱しようとするととたんに面倒になるものが多い印象があります。その半分も機能は使われないフロントエンドフレームワークを止めて、Concise.CSSを使ってみてはいかがでしょう。 Concise.CSSの使い方 まずはConcise.CSSで作られたサイトのサンプルから。 テキストベースでもちゃんと作り込めるのが良いですね。 スクロール系のページ構成です。 ここから画面要素についてみていきます。 グリッド。 ヘッダー。 小さい文字や斜体。 引用。 住所。 文字寄せ。 背景色。 階層対応
FirefoxのレスポンシブデザインビューでRWDの見え方を簡単チェック
[対象: 中級] この記事では、さまざまなサイズのディスプレイでレスポンシブ・ウェブデザインがどのように見えるかを簡単に確認できるツールを紹介します。 ツールといっても特別なものは必要ありません。 SEOに取り組むあなたなら必ずインストールしてあるはずのFirefoxを使うだけです。 Firefoxの一機能である「レスポンシブデザインビュー」を利用します。 特別な設定やアドオンのインストールは不要です。 「ツール」―「Web開発」―「レスポンシブデザインビュー」で開始できます（Windowsは若干異なるかと思いますが、見つけられますよね）。 ウィンドウ（タブ）のなかに、そのページが独立したビューで表示されます。 四角形のビューの右・下・右下にカーソルを合わせてサイズを自由に変更できます。 プリセットであらかじめ作成されているサイズを選ぶこともできます。 プリセットの隣にある矢印アイコンは、
これからのWeb制作スタイルとプロトタイプの考え方 - よつば手帖
近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの
プログラミングもクラウドへ―― 学習＆開発環境Webサービス23選まとめ
プログラミングもクラウドへ―― 学習＆開発環境Webサービス23選まとめ：安藤幸央のランダウン（67）（1/3 ページ） オンラインのプログラミング環境や、オンラインでコードを書いて学べる学習サイト9選、ビジュアル（子ども向け）プログミラングWeb環境5選を紹介する。 道具としての開発環境 今となっては昔のことですが、机の上でノートに鉛筆でソースコードを書いてプログラミングしていた時代がありました。現在のプログラミング環境から振り返ると、そういう作業はアルゴリズムを考え、頭で想像したコードを書き下ろしており、脳内エミュレーターのようなものだったのかもしれません。 最近のプログラミング環境は、規模も複雑さも肥大化しつつ、プログラミングに関する情報もツールも大変充実したものです（マイナーな環境の情報が少ないことや、新古の情報が混在している問題はありますが）。 Web上の情報も書籍も豊富で、自分
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
Web Starter Kitを触った感想とかとか
こんにちは、デザイナーのてっちゃんです。 今回は最近Googleの方でリリースされたWeb Starter Kitが気になったので、触ってみました。 私は業務の中でBootstrapを使ってデザイン・コーディングを行っていますが、Bootstrapを使うために色々補助ツールを使っています。Sass、compass、grunt、画像圧縮、ブラウザのオートリロード とかですかね。 こんな感じで環境を整えていますが、もっと簡単に必要な環境を使うことが出来るパッケージになっているツールがWeb Starter Kitです。 Web Starter Kitって何ができるの？ 様々なデバイスに対応することができるフレームワークです。 先ほど話しに挙げたBootstrapやFoundationといった有名なツールと似ていますが、決定的に違うのは環境ごと揃えてくれるところです。 マルチデバイス対応 スタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
