社内向けに書いたドキュメントが好評だったので公開しちゃいます。 基本編1 本体と三角形を分けて実装します <div class="balloon"> こんにちはこんにちは！ <div class="triangle"></div> </div> .balloon { position: relative; width: 200px; height: 30px; background-color: #ccc; text-align: center; } .balloon .triangle { position: absolute; bottom: -10px; left: 50%; margin-left: -10px; width: 0; height: 0; border-top: 10px solid #ccc; border-left: 10px solid transparent

demo https://jsfiddle.net/junya_5102/pgu54owz/6/ タッチさせる要素に ontouchstart=""と指定する。 これを指定しないとタッチでは:activeと:hoverは反応しない。

$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }

はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上

よく見るこういうやつです。GitHubからそのモジュールがどのくらいダウンロードされてるか（人気か、使われてるか）分かっていいです。 https://nodei.coにアクセスすると参考画像とそのリンクが見られます。 Shut up and make me one NOW! ってとこは入力しても Package not found と表示されて使えないっぽいです。 ①npm install <package> のバッジ https://nodei.coのBadge Stylesってとこを参照してください。 基本的に [](https://nodei.co/npm/<package>/)

やっと理解したのでメモ 何がしたいか npmパッケージを登録する時にcoffeeやtypescriptのコードをコミットせず生成したjsだけをアップロードしたい 自動生成したjsをgitで管理したくない どうやるか src/** にソース、lib/** に実体があるとする .npmignore に npm にアップロードしたくないものを書く

RawGitは、2019年10月に、サービスを終了するとのことです。 https://rawgit.com/ RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end. GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served. If you're currently using RawGit, please st

背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip

(3/22/16更新: 似たような記事が多かったので「移行応援」タグをつけた（宣伝乙） 10.9時点の記事ですが、10.11(El Capitan)でもほぼ同様にできるハズです。ただEl Capitanのrootless/SIPの影響でHomebrewのインストールではまる可能性があります。以下の2記事が詳しいです: http://qiita.com/riocampos/items/525ec4b35744ad586c5a http://qiita.com/aoioooii/items/c14922eede6a83a750da 本文/画像はほぼ最初期のものから変わっていません) 目的 クリーンな状態から、 最速で 、かつ GUIツールを使って Ruby on Railsの開発環境＋Gitでのバージョン管理の環境を整える。 コマンドラインでやる方法は山ほど書かれてきました。それでも初めての人

概要 社内の備品（主にスマホやパソコンなどの端末）をアプリで「ピッ」とスキャンするだけで、簡単に貸出/返却処理ができるTSUTAYAのレジ風システムを作りました。 その名も「ネコレジ」 OSSなテスト支援ツール「Chibineko」に続く、ねこシリーズ第2弾です。 ネコレジのシステム構成 備品を識別する仕組み 備品の識別にはQRコードを使用します。 各備品にはそれぞれ一意のIDを埋め込んだQRコードを貼り、リーダー側（クライアントアプリ）で識別できるようにします。 QRコードの印刷にはテプラPRO SR5900Pを使用。 このテプラはLAN接続対応なので、iPhoneからも直接印刷ができるスグレモノです。 ちなみにうちの部署にはスマホやガラケーなどが1,000台以上ありますが、気合いですべてに貼りました。 会員カード（通称ネコカ） ユーザーの識別も同様にQRコードで行います。 できるだけお

以下、ブログに書いたのとほぼおなじ内容だけどこっちにも転載してみます。 github: https://github.com/rstacruz/rscss githubのREADMEをドキュメント化したもの: http://ricostacruz.com/rscss/index.html （このドキュメント自体がRSCSSの実践例になってる） しばらく CSS とか追ってなかったので、触るにあたって「むやみにCSS書いてたら後で確実に死ぬし、そういえばなんかOOCSSとかあったな」と思っていろいろ調べてたら OOCSS の他にも SMACSS とか BEM とか SuitCSS とか FLOCSS とかなんかいろいろ出てきて大変でした。たしか SMACSS くらいまでは記憶があるんだけど…。 で、どうもどれもしっくり来ないのでさらに調べてみると RSCSS というものを発見。「フレームワー

弊社に５年間在籍していたロシアの天才ハッカーが先日退職しました。 ハッキング世界大会優勝の経歴を持ち、テレビ出演の経験もある彼ですが、正直こんなに長く活躍してくれるとは思っていませんでした。彼のようなタレントが入社した場合、得てして日本の大企業にありがちな官僚主義に辟易してすぐに退職するか、もしくはマスコットキャラとして落ち着くかのどちらかのケースがほとんどなのですが、彼は最後まで現場の第一線で活躍してくれました。 そんな彼が最後に残していった退職メールがなかなか印象的だったので、その拙訳をここに掲載します（転載について本人同意済み。弊社特有の部分は一部省いています。） ああ、なんという長い旅だったろう。この会社で５年間もセキュリティを担当していたよ（諸々の失敗は許してくれ） 俺は他の退職者のように面白いことは書けないが、私のこの退職メールを読んでくれている人、特に新人エンジニアのために、

jQueryをできる限りCDNから読み込みたい 可能であればファイルサイズを節約したい などの要件を満たしたjQueryの読み込み方を、Jadeで記述する方法を紹介します。 jQueryの読み込みの際に使う2つの手法 CDNから読み込む際のフォールバック HTML5 Boilerplateなどで採用されている、CDNから適切に読み込むことができなかった場合に備えてのフォールバック処理を用意するテクニックを使用します（参考: HTML5 Boilerplate and jQuery - Stack Overflow）。 具体的には、下記のようにHTMLを記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> window.jQuery ||

はじめに 自分が使っているライブラリが内部で別のライブラリを使っているかをきちんと調べなかった結果、ライセンス表記とライセンス文を入れ忘れ、ライセンス違反している状態になっていた事があります。 気になって他のライブラリも調べたら、そういう所がいい加減だったりドキュメントで説明していない事例は結構あったので色んな所でライセンス違反者が続出してそうと言うアレな話です。 ライセンスの話は専門家でも解釈が分かれたり国によって法律が違う事があるので、細かい法的な内容や個別の事例ついては良く分からないです。あきらかにあかんでしょみたいな事を中心に書いてます。 また違反と一口に言っても、表記の間違いやライセンス文のコピーの入れ忘れなどから、コード公開義務違反や商用禁止ライブラリを商用で使うまで色々ありますし、故意なのか過失によるものなのかでも全然違いますし、著作権者も寛大だったりパテントトロールだったり

Webサイトのディレクトリ構造とその命名って、特に決まりがなくて迷う 筆者は英語についてはほとんどよく知らないため、完全な独断による記事。 ただし、できるだけモヤモヤしないことを優先し、筋が通っていそうなルールを目指す。 画像・スクリプト・スタイルシート等をHTMLと分けて入れるフォルダの名前をどうするか? よくある名前 ルート直下に「HTML以外をまとめるフォルダ」を作るときは、 特に決まりはないが、だいたい以下のような名前が多いと思う。 assets, public, module, modules, common, commons, resource, resources それぞれの単語の意味合いをまとめまた。リンクをクリックするとweblio辞書に飛ぶ assets：複数形で 個人・会社の 財産・資産 public： 公開の・共有の modules：モジュール commons：共通

はじめに 3行まとめ GitHubでライブラリ・プラグインを公開する方法がわかります 特にJS/jQueryのライブラリを公開する際のTipsがまとめられてあります ドキュメントに何を書けばいいか？が分かります 対象読者 JavaScriptで他の人にも使ってもらいたいコードを書いた！ jQueryでぬるぬる動くユニークなアニメーションのコードを書いた！ 公開して世の中の人に使ってもらいたい！ Index 1. ファイル 圧縮ファイル(~.min.js)を準備 命名規則を汎用的に jQueryならversionを明記 コメントを書く・削る 高速化・最適化をする 非標準のメソッドは使わない use strictモードを使ってみる ESLintでJSテスト DOMをキャッシュする 2. 公開 Demoページは必要 Docsのススメ bowerで公開 npmで公開 バッジを付ける 1. ファイル

混ぜ過ぎ注意 Jadeで色々な記法を使う方法とカスタム・フィルタの作り方。 複数の書き方ができるけど、エディタによっては、シンタックス・ハイライトのされ方が変わったりする。 html 通常のhtmlのタグを書くだけで使える。

自分で作ったWebページをリポジトリとして公開して、なおかつそのページをGitHub Pagesで表示させる方法です。やってみれば簡単だけどそもそもGitHubほとんど使ったことなかったので時間かかってしまいましたorz 1.ローカルでWebページの作成 公開したいwebページを作ってください。 2.GitHubにリポジトリ作成 GitHubのユーザーページに行って好きな名前でリポジトリを作成してください。 3.ローカルでファイルを追加してadd→commit→push まずは作成したリポジトリをローカルにクローンします； git clone https://github.com/ユーザー名/リポジトリ名.git クローンしたリポジトリのディレクトリに移動してください； cd リポジトリ名 作成したhtmlファイル等をディレクトリ内にコピーしてください。 cssやらjsやらimagesやら

Google Maps APIを利用していて見た目が変わったと思ったので、Google Developerサイトを少し調べてみたところ、3.22へのアップグレードのタイミングでコントローラのデフォルトが変更になった模様。よりモバイルでの操作を意識して改良しているように感じました。 Googleマップのコントローラとの親和性もあるので、しばらくすれば見慣れると思われます。 新しいコントローラは、Jsライブラリ呼び出しのEndpointにv=3.expやv=3.22などのパラメータを指定することで使用できます。 <script src="https://maps.googleapis.com/maps/api/js?v=3.22&signed_in=true&language=Ja&region=JP"></script> Version 3.21以前で描画した場合のコントロール（サンプルコー

県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ