サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
webhack.hatenablog.com
2016 - 08 - 01 よくある構成のサイトを高速化してPageSpeed Insightsで100点を取る方法 ウェブ開発 ウェブデザイン CSS Javascript SEO 写真はうちのみーこ。 サイト制作でよく使われる以下のライブラリ/CSSに依存したサイトを高速化して GoogleのPageSpeed Insightsで100点 を取る方法を説明します。 Google Fonts jQuery Bootstrap FontAwesome 実際にどのぐらい速度に違いがあるのかデモページを設置しました。使っているウェブサーバーはさくらの共有レンタルサーバーです。 高速化前 https://tkosuga.jp/experimental/pagespeed-unoptimized.html 高速化後 https://tkosuga.jp/experimental/pagespee
2016 - 07 - 21 小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ３選。 d3 Javascript jQuery SVG ウェブデザイン 写真はうちのみーこ。 スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。 1. Peity http://benpickles.github.io/peity/ HTMLの要素をSVGの小さいチャートに変換してくれる使い易いライブラリです。これだけでパイチャートを描画できます。 <span class="pie">1/5</span> <script> $("span.pie").peity("pie"); </script> jQueryに依存 SVGで描画 ライブラリ自身も小さい 2. MetricsGraph
2016 - 01 - 24 SEO対策で大切な被リンクの調査方法と管理方法 SEO ウェブマーケティング 写真はうちのミーコ。 被リンクの調査方法はあまり変化がなく固定化されています。この記事はその調査方法の要点をまとめたものです。 被リンク情報の取得について 1. Google Search Consoleを使う（旧名：Google Webmaster） Google Search Console からCSVで被リンクをダウンロードできます。一般的な「被リンク調査」と呼ばれる作業を行う対象がこのCSVファイルです。 CSVファイルの内容は以下2項目です。 被リンクが見つかったページのURL 被リンクをGoogleが検出した日付 今もリンクが残っているのか？アンカーテキストは何か？の情報は含まれませんので、場合によっては検出されたURLにアクセスして必要情報を抽出する必要があります。 こ
2015 - 12 - 06 2015年12月時点。コンテンツマーケティング業界のおさらい コンテンツマーケティング マーケティング 写真はうちのみーこ。 いまブームになりつつあるコンテンツマーケティングと取り巻く業界を整理して紹介します。企業のマーケティング担当者や、サイト運営者、コンテンツマーケティング関連のビジネスを展開している・または考えている方向けの情報です。 1.ネイティブアド（ネイティブ広告） コンテンツマーケティングと相性が良いとされているのがネイティブ広告です。ネイティブ広告の言葉の意味はとても広くリスティング広告まで含まれてきます。 媒体や出稿形式が広告形態によって異なりますが、コンテンツへの誘導という点は共通しています。 以下メジャーなネイティブ広告を提供している企業とそのサービスです。 OutBrain Yahooコンテンツディスカバリー （ Taboola と提携
2015 -11 -25 æ°ããWordPressãCalypsoãã®ã¤ã³ã¹ãã¼ã«æé ã¨åä½ï¼ãã£ããã£è¾¼ã¿ï¼ã®ç´¹ä»ã WordPress node.js CMS â» Introducing the New WordPress.com ã®ãã£ãã㣠Node.jsã§ãã«ãªãã¬ã¤ã¹ãããæ°ããWordPressã®Calypsoãã¤ã³ã¹ãã¼ã«ãã¦åä½ãããæã¾ã§è©¦ããã®ã§è¨äºã«ãã¾ããæè¦1æéãããã§ãã Calypsoã®ç¹å
2015-11-10 全国のウェブ系プログラマに捧げるSEO対策マニュアル SEO Photo credit: bjimmy934WEBサイト制作会社やWEBインテグレーション事業にプログラマ・エンジニアとして携わっている方向けに、プログラマの立場から見たSEO対策の要点を説明します。 1. SEOの仕様はGoogleが決めている 以下記事の2015年8月時点での情報によると日本国内でのGoogleとYahooの検索エンジンシェアは93.69%です。Yahooの検索結果はGoogleを使っています。日本国内で使われている検索エンジンシェアほぼGoogleの独占状態にあります。ASCII.jp：いつの間にか日本もGoogle寡占！ 検索エンジンシェア早わかり2015 (1/2)｜高橋暁子の「意外と知らない!? 業界ランキング」そしてGoogleはウェブマスター向けにガイドラインを案内しており
2015-11-09 2015年11月時点。マテリアルデザインのアニメーション情報のまとめ。サンプル集付き。 ウェブデザイン レスポンシブデザイン マテリアルデザイン Photo credit: Gattou - Lucie Provencherいま流行中のマテリアルデザインの肝は？と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。マテリアルデザインで使われるアニメーションについてのパターンや情報がまとまっているページが見当たらなかったのでこの記事にずらーっとまとめて行きます。 Dribbbleでマテリアル＋アニメーションで検索 Dribbbleで検索すると良質なサンプルがたくさん見つかります。dribbble.com dribbble.com dribbble.com dribbble.com drib
2015-10-14 paizaでSランクを取る方法[Ruby] 転職サイトのpaizaはお題に合わせてコードを書けるから楽しいですよね。下のランク（D）から上のランク(S)までなるほどと頭を使う問題がバランスよく揃っていて、採用側の機能は使った事ないですが書いたコードも見れるようなので即興のコードを見てもらうにはぴったりなサービスかなと思います。さて、ここから本題です。少し前にRubyを使ってSランクを取ったので、そこで気づいた"コツ"を紹介していきます。 1. 入出力を揃える DランクからC、Bと進む中で入出力ルールがほぼ同じ事に気が付くと思います。そのため標準入力から読み取る部分、コードの最後で出力する部分を揃えます。ストリーミングで処理が必要な問題は少なかった気がするので、ドカンとデータを読み込んで配列やマップに格納。処理した結果データが格納されている配列やマップをドカンと出力する
2015-09-16 パワーポイントでFont AwesomeのWEBフォントを使う方法 パワポでWEBフォントをフォントして埋め込んだサンプル↓パワーポイントで資料作ってると、時折アイコン入れたくなりますよね。ソーシャルメディアのアイコンとかイメージを探してきて、わざわざスライドの中にサイズ指定して埋め込むのと調整手間だし嫌だなと思っていたら、ふとFont Awesomeがあるじゃんと頭に浮かんだので早速試してみたら無事に使えました。Font Awesome のWEBフォントをパワーポイント(Power Point)で使う方法を説明して行きます。 1. フォントファイルをWindowsにインストールする https://fortawesome.github.io/Font-Awesome/を開いてダウンロードボタンを押して下さい。するとフォントファイルが格納されたzipファイルをダウンロ
2015-07-10 2015年7月時点。レスポンシブCSSフレームワークを一覧で紹介 CSS ウェブデザイン レスポンシブデザイン レスポンシブデザインを実装するのに利用するCSSフレームワークが重量級から軽量なもの、全てコミコミのものから必要最小限のものまで多数登場しています。数が多くなって分かりづらくなってきたのと、更新されなくなって放置気味のCSSフレームワークもでてきました。ここではCSSフレームワークをリンク集の形式でまとめます。 はじめに、用途別おすすめレスポンシブCSSフレームワーク（2015/7月時点） 失敗しない選択肢 = Bootstrap Bootstrapが重たすぎて好きじゃない = Pure シンプルなBootstrapがほしい = Semantic UI レイアウトだけレスポンシブにしたい = skeleton 1.メジャーなCSSフレームワーク Bo
2015-07-10 ブラウザにログを美しく表示するrtailが良い感じ ウェブデザイン ウェブ開発 コマンドラインツール rtailはターミナルに出力される内容をそのままウェブブラウザで（美しく）表示することができるnode.jsで作られたツールです。Terminal output to the browser in seconds, using UNIX pipes.rtail.orgkilianc/rtailgithub.com 説明を見るだけだと、いまいち使いどころが掴めないと思います。railsのログを使って実際に試してみました。 rtailのインストール sudo npm install -g rtail rtailサーバーの起動 web-hostをつけるとIPの指定、--web-portを付けるとポートの指定です。ポートは指定しない場合8888が利用されます。IP部分はお使
2015-07-09 はてなブログのタイトル部分にCSS3で回るリングエフェクト追加してみた CSS ウェブデザイン はてなブログ はてなブログのデザイン変更でブログタイトル部分にCSS3でゆらゆら回るダブルリングのエフェクトを加えてみました。この記事ではこのカスタマイズ方法を説明します。 PCでの見た目 PCブラウザで見るとタイトルの文字の中心をぐるぐる回っています。 スマホでの見た目 スマホで見るとアイコン画像部分をぐるぐる回っています。CSS3だけで実装しているのでブログのカスタマイズ範囲でも問題なく導入できました。 スマホのカスタマイズ方法 「デザイン > スマートフォン > タイトル下 > スマートフォン用にHTMLを設定する」に下のタグを追加してください。はてなPROじゃないとカスタマイズできないかも知れません。 <style type="text/css"> .hoja
2015-07-09 高品質なCSSスタイルガイドラインをまとめた（日本語訳付き） CSS ウェブデザイン 去年今年と各社から高品質なCSSのスタイルガイドラインが公開されています。この記事ではオリジナルのURLと、その日本語翻訳されたURLを合わせてまとめています。この記事は定期的に更新する予定です。 Google HTML/CSS Style Guide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#CSS_Style_Rules 日本語訳 HTML5 - Google HTML/CSS Style Guide まとめ - Qiita Google HTML/CSS Style Guideを全部日本語に訳してみた【CSS編】 | ぶちねこどっとうぇぶ Code Guide by @mdo Code
2015-07-08 マテリアルデザイン(Material Design)フレームワークのリンク集 CSS ウェブデザイン マテリアルデザイン レスポンシブデザイン マテリアルデザインのガイドラインを出していたGoogleから公式のフレームワークも登場するなど、今年に入ってマテリアルデザインフレームワークが充実してきました。マテリアルデザインが盛り上がる背景として、ウェブページとアプリの両方で使いやすい（特にアプリ）、Googleが推奨している、評判が良いなどの理由があります。用途に合わせてフレームワークを導入しないと半年後に作り直しといった事になりかねますので、この記事は技術の選択・検討漏れを防ぐ事を目的にマテリアルデザイン(Material Design)フレームワークをリンク集形式でまとめます。このページは定期的に更新する予定です。 Material Design Lite 公式
2015-07-04 ウェブフォームにダミーの値を入れる"jQuery-Faker" Javascript jQuery ウェブ開発 jQuery-Fakerは開発中のフォームにダミー値を自動入力するjQueryプラグインです。jQuery-faker by All-Go-Rhytm使い方はこれだけです。 $( "#myform" ).fakify(); 例えばcustomerの属性address_1に番地を入れる場合には"address.streetAddress"を指定します。 $("#myform").fakify({ "except": ["customer[mname]","city"], // keeps mname and city from auto generating "customer[address_1]": "address.streetAddress", //
2015-07-07 ウェブページでマインドマップを見せるにはjsMindがベスト オープンソース ウェブデザイン Javascript jsMindはJavascriptで作られたマインドマップです。HTML5とCanvasを使っています。ライセンスは3条項BSDライセンスです。 デモサイトURLjsMind - Online MindmapGitHubのURLhizzgdev/jsmindgithub.comマインドマップは画像にすると大きすぎるし、専用アプリ/ビュワーを使ってもらうのも少し手間でした。このjsMindはウェブページ上で動作してノードの開く閉じるもできるのでとても使い勝手が良いです。 tkosuga 2015-07-07 10:01 ウェブページでマインドマップを見せるにはjsMindがベスト Tweet コメントを書く Bootstrap + jQueryでレスポ
2015-07-03 Googleの人工神経ネットワークが書いた「あの絵」を作れるオープンソース"cnn-vis" オープンソース 人工知能 Googleが機械的に書いた絵が(芸術的だ|怖すぎる|未来を感じる)と話題になりました。元記事：Research Blog: Inceptionism: Going Deeper into Neural Networks"cnn-vis"はPythonを使ったCNNs(畳み込みニューラルネットワーク)で画像生成ができるオープンソースです。MITライセンスで提供されています。下画像は"cnn-vis"で作られています。 Googleの画像認識AIに影響を受けたツールでインストールの手順からオプションの使い方まで説明されています。jcjohnson/cnn-visgithub.com別途Caffeをインストールする必要があり、Caffeは中でCUDA
2015-06-28 JavaScriptを一枚の画像で学習する。javascript-in-one-pic FreeMind？で書かれたJavascriptの基本を学習するツリーマップ画像です。とにかく縦に長い画像です。coodict/javascript-in-one-picgithub.com 最近、githubでawesome-*のように1つの技術を体系的にまとめられた昔風に言えばリンク集が人気です。javascript-in-one-picも1つの技術が1つの画像にまとめられているので分かり易いですね。以下はawesome-*シリーズのawesome-rubyです。 Awesome Rubyawesome-ruby.com おそらく作るのは時間がかかりますが極端に難しいものではないと思います。試して見たい方向けにFreeMindを紹介します。 FreeMind プロジェクト日本語
2015-06-28 マテリアルデザイン(Material Design)のcssやフレームワーク ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向いています。カラーパレットをcssで指定できるのは分かり易くていいかなと思います。 2. Polymer https://www.polymer-project.org/1.0/ Web Componentsでサイトを作るのにマテリアルデザインを導入するならPolymerが向いています。更新頻度が速くて開発がどんどん進められている印象です。 3. Bootswatch
このページを最初にブックマークしてみませんか？
『webhack.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%25E3%2581%25AEcss%25E3%2582%2584%25E3%2583%2595%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%25A0%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF)