“将棋電王戦FINAL”出場の将棋ソフト「Apery」のソースコードが公開
[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
demo: pie menu アイコンをクリック（タップ）すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを
![[JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/302021738966caaf051fa35a7a6c058cd7935a66/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015022401.png)
ブログやサイトのパフォーマンス改善やセキュリティ向上のためによく使う.htaccessの設定のまとめ
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
精度95%以上！ ソースコードは指紋、作者はほぼ特定できる
精度95%以上！ ソースコードは指紋、作者はほぼ特定できる2015.02.11 19:0010,967 ほぼドンピシャでバレバレです。 スペースやタブ、大文字やアンダーバーを組み合わせた命名規則、コメント…コードの書き方には、人によってスタイルがありますよね。それはもう指紋のようなもので、それさえ見えれば、誰がコードを書いたかほとんどわかってしまう…そんな驚きの研究結果が発表されました。 米ドレクセル大学、メリーランド大学、プリンストン大学、独ゲッティンゲン大学の共同チームの研究によると、自然言語処理と機械学習によるコード分析により、95%の精度で作者は特定できるそうです。 解析されるのは、レイアウトや語彙の特性と、｢抽象構文木（AST）｣です。ASTとは、｢コードの書き方からまったく影響を受けずに、コードの型の特性をとらえる｣もので、つまり、関数の名前、コメント、スペース入れ方などのクセ
Rubyのgemのソースコードを効率的に読む方法 - おんがえしの blog
いきなり読み始めてもよいのですが、事前に軽く準備しておくと読みやすくなります。 読みたいソースコードをダウンロード bundle install --path vendor/bundle 検索用のインデックスを貼る 読む bgm.rbを例に説明します。 読みたいソースコードをダウンロード hitode909/bgm $ git clone git@github.com:hitode909/bgm.git $ cd bgm bundle install --path vendor/bundle $ bundle install --path vendor/bundle . . Installing json 1.8.2 Installing multi_xml 0.5.5 Installing httparty 0.13.3 Installing itunes-search-api 0.1.
[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="jquery.pwstabs-1.2.0.js"></script> </head> Step 2: HTML 各コンテンツをdiv要素で配置し、ラッパーで内包します。 タブはスクリプトで実装されるので、必要ありません。 <div
![[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64a904158ec2baa31b10249a1ba5d80abb96b8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012601.png)
[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ
大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。 シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。
![[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e899eb8da8739d23bb0715fe273fb5e1d72d6be1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011500.gif)
[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルなので、簡単に利用できると思います。 Rotating menu 実装 HTML HTMLは非常にシンプルです。 <nav> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Serviсes</a> <a href="#">Contacts</a> </nav> CSS ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。 body { font-family: "Open Sans Condensed" sans-serif; display: -webkit-flex; display: -ms-fle
![[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a1595bf6696cf508a760fed6fa8ed736c886b2b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015010802.gif)
すべてのソースコードが手元にあるのに不要な抽象化を行うのはよくない
「よい」とされているプログラミング手法のひとつに差分プログラミングがある。クラスを継承して親クラスとの差分だけのコードを書けば、親ですでに実装されている機能はそのまま使えて、かつカスタマイズもできるというやつだ。 たとえばGUIのボタンをカスタマイズしてマウスオーバーするとなにかちょっと特殊なことを行うボタンを作りたいとしたら、ボタンクラスを継承して、マウスオーバーのイベントハンドラをちょいちょいとカスタマイズしてやればよい。差分プログラミングは大変素直でよいプログラミング手法のような感じがする。 よいのはよいと思う。 しかしこういういい例だけをみてそれをどこでも真似しようと思ってしまうと、不必要な抽象化を積み重ねる困ったプログラマになってしまう（そういう人は結構たくさんいる）。自分でプログラムを書く場合には、よくできたクラスライブラリやフレームワークをお手本にして抽象化を行うのは、ほとん
第278回 Ubuntuカーネルとの付き合い方：Ubuntu Weekly Recipe｜gihyo.jp … 技術評論社
コンピューター上でUbuntuを動かすために必要になるLinuxカーネルは、Ubuntuにおいてもっとも重要なコンポーネントです。今回はそんなLinuxカーネルとUbuntuの関係について説明します。 Ubuntuカーネルのことを知ろう Ubuntuは「Linuxカーネル」を使ったLinuxディストリビューションの1つです。どのようなマシンのうえでUbuntuが動作するか、どのようなデバイスをUbuntuで使えるかは、ひとえにカーネルに懸かっているために、Ubuntuではサポート期間やサポート対象、導入する新機能などを考慮したうえで、LinuxカーネルにUbuntu独自の変更を加えてリリースしています。 たとえば、現在Ubuntuで使われているカーネルのバージョンは、次のコマンドで確認できます。 $ uname -rv 3.8.0-25-generic #37-Ubuntu SMP Thu
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com
これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。 ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a href="javascript:void(0)" class="btn"><span>twitter</span></a> </div> CSS ホバー時に変更するテキストと背景は「body .btn-cont .btn:after」に記述します。 body .btn-cont { position: absolute; top: 50%; left: 50%; -webkit-transform
![[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/c57794ed73c7db091610513a15f90475d1cdcecb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112103.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
Webのページレイアウトやコンポーネントのレスポンシブ対応のさまざまなアイデア集 -Responsive Patterns
2014年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2014
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements
スタイルシートの検証に便利！ページで使用しているプロパティがどのように使われているかが分かるChromeの機能拡張 -CSS Dig
