VuePressを用いた静的サイト生成入門 | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行うものです。今回はMisskeyオフィシャルサイトであるMisskey Hubでも使用している、静的サイトジェネレーターVuePressについて紹介します。 図1 VuePressで構築されている「Misskey Hub」 静的サイトとは 静的なサイトを理解するにはまず動的なサイトを理解するのが早いと思います。 動的（dynamic）なサイトとは、簡単に言うと閲覧者のアクセスごとに内容をサーバーで生成するWebサイトのことです。例えばTwitterのようなサービスを考えると、表示されるタイムラインは閲覧者がフォローしているユーザーによって異なるため、同じtwitter.comへのアクセスでも異なる内容になります。 静的（static）なサイトとは、動的なサイトの逆で、そのWebサ
オススメはこれ！iPhoneの”有料スキャナアプリ”5つを徹底比較してみたぞ
これら5つのアプリでスキャナとしての使い勝手を、以下の3つの項目で比較評価していきます。 スキャンした画像のキレイさ1「白黒書類」 スキャンした画像のキレイさ2「カラー:雑誌の表紙」 台形補正の正確さ なお、それぞれのアプリには取り込んだ画像を調整する機能がありますが、今回は自動調整のみの一発スキャンのデータで勝負です。 3つの項目でスキャンアプリを徹底比較 それでは、順番に各項目を評価していきたいと思います。総合でNo.1に輝く有料スキャンアプリはどれか注目ですよ〜！ 1.「白黒の書類」を取り込んだ画像でキレイさを比較 「白黒書類」の検証用に用意したのは、パソコンで作成してプリンタで印刷したもの。よくある仕事などの書類のイメージです。 下側には鉛筆で落書きをして、ちょっと薄い文字や絵がどのようにスキャンされるのか合わせて見ていきます。 まず最初は『CamScanner+』。ぱっと見かなり
iPhone/iPadで見ているリンクの記事タイトルとURLを画像付きでSafariから直接ツイートできるアプリ「TwitShot」
iPhoneのSafariで気になるページを見つけた時、TwitterやFacebookでその情報をシェアするのは非常に簡単だ。「iOS 8」になってからTwitterやFacebook以外にも「Pocket」や「1Password」などのサードパーティ製アプリとも簡単に連携できるようになった。 Facebookでリンクをシェアすると、記事タイトルとURL、リンク元が設定していればOGP画像がセットで投稿される。一方、Twitterは記事タイトルとURLしか表示されず、画像を付加したくてもできないのが現状。 Twitterの調べによると、画像付きツイートの方がリツイートされる割合が35％向上するらしい。流れるタイムラインの中で自分がシェアしたリンクをフォロワーに読んでもらうためには、画像付きで投稿した方が良さそうだ。 今回紹介する「TwitShot」はiPhoneまたはiPadで見ているリ
ブックマークレット10選
こんにちは、デザイナーのサリーです。セブ島のお土産に名物のシニガンスープの素をたくさん貰いました。 シニガン？な私は裏面（おそらくフィリピン語）を見てもさっぱり作り方がわかりません、クノールなのに… パッケージイラストとクックパッドを頼りにどうにかこうにか料理してみようと思います。 今日はデザインやコードをチェックするのに便利なブックマークレット10個を紹介します。 デベロッパーツールやブラウザの拡張機能を使った方が良さそうだと思ったもの、個人的に使いづらかったものは除外して、実用性のあるブックマークレットを選んでみました。 「ブックマークレットってなんだろう？」な方に説明をしておくと、 ブックマークレット 通常ウェブブラウザでブックマーク（お気に入り）を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選ん
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など - Design Color
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など 2018 1/03 レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバイスにワンソースで対応する技術が「レスポンシブWebデザイン」です。具体的には、閲覧しているデバイスの画面サイズに応じてサイトのレイアウトを切り替えてくれるというもの。 例えば以下のサイトでは画面幅が変わるごとにレイアウトとおじさんの顔が変化するという面白い作りになっています。 Hello Fisher 他にPCサイトを各デバイスに対応する方法としてはPHPなどで表示を切り替える方法がありますが、そうなると各デバイス用のデザインやソース、画像を新たに用意する必要が生じてきます。 もちろん、何も対応しなくても各デバイスからPC
[JS]アニメーションが気持ちいい！複数のパネルをiOS風のエフェクトで切り替える -Kontext
CSSの3Dアニメーションを使った、iPhone, iPadアプリで見かけるパネル切替のエフェクトをウェブページに実装するスクリプトを紹介します、 Kontext -GitHub Kontextのデモ Kontextの使い方 Kontextのデモ デモでは3枚のパネルをダイナミックなアニメーションで切り替えます。 操作は、下部のナビゲーションとキーボードの矢印キーに対応しています。 Kontext -デモページ Kontextの使い方 スクリプトは単体で動作するので、jQueryなどは必要はありません。 Step 1: 外部ファイル 当スタイルシートをhead内に、スクリプトを<body>の上に外部ファイルとして記述します。 <head> <link rel="stylesheet" href="css/kontext.css"> <link rel="stylesheet" href="
ページ内の見出しに合わせて目次を自動生成する
Result 簡易的なものなので汎用性は高くは無いかも。 jQuery(function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; //IDを合わせて見出しへのページ内リンクと目次へのページ内リンクを生成 $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a hre
テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」:phpspot開発日誌
Columnizer jQuery Plugin テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」。 <div>内にある、<h1>や<p>で構成されただけの文書を初期化すると、新聞風のレイアウトにしてくれます。 マークアップ例 初期化したレイアウト。カラムの幅なんかはclass名指定によって選べるようです。 ちょっと変わったUIにしたい、とか新聞っぽさを出したい時に使えそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQueryプラグイ
超豪華！今年ヒットしたポップミュージック50曲をまとめたマッシュアップ「Pop Danthology 2012」 | ゴリミー
2012年のヒット曲50曲をマッシュアップした「Pop Danthology 2012」 https://youtu.be/If5MF4wm1T8 使用されている全曲のリストは以下からどうぞ！ Adele – “Set Fire To The Rain” Adele – “Skyfall” Alex Clare – “Too Close” Calvin Harris feat. Ne-Yo – “Let’s Go” Carly Rae Jepson – “Call Me Maybe” Cher Lloyd – “Want U Back” Chris Brown – “Don’t Wake Me Up” Chris Brown – “Turn Up The Music” Christina Aguilera – “Your Body” David Guetta feat. Chris Bro
通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」:phpspot開発日誌
diy/jquery-emojiarea GitHub 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」。 次のように、絵文字をテキストで表示するのではなくて、そのまま絵文字を埋め込めるtextareaに変えることができます ポップアップからクリックで挿入可能 :smile: とかでもいいのですが、初心者の場合はやはり見たまま編集が便利ですね。 6KBで軽量で$(element).emojiarea() と実装もお手軽なので、絵文字を入れたい場合など一度試してみてもよさそう 関連エントリ テキストの絵文字を画像アイコンに変えてにぎやかにしてくれるjQueryプラグイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
