GitLab開発チームは1月10日、Gitリポジトリを核とするプロジェクト管理ツール「GitLab 8.15.4」を発表した。バグ修正が中心のリリースで、無償のオープンソース版Community Edition（CE）とサポート付きの有償版Enterprise Edition（EE）の2種類を同時にリリースする。 GitLab 8.15.4は、2016年12月後半に公開したGitLab 8.15の4回目のマイナーリリース。GitLab 8.15では、「Auto Deploy」としてアプリの実装とレビューの設定を自動化する機能などが導入されている。 最新版では、Ruby製ライブラリ「Turbolinks」におけるクロスサイトスクリプティング脆弱性を修正した。バージョン2.5.4以前のTurbolinksはHTMLコンテンツタイプを持つ添付ファイルの読み込み時にクロスサイトスクリプティング攻撃

スマートフォンの普及に伴ってモバイル端末向けコンテンツの充実の重要性が唱えられており、特にページの読み込みと表示に時間がかかってしまうと離脱されるリスクが高いことから、ページに最適化を施して素早く表示することが重要といわれています。対象となるページがどれぐらいモバイル向けに適しているかをURLを入れるだけで検証できるサイトが、Googleの「Mobile Website Speed Testing Tool」です。 Mobile Website Speed Testing Tool - Google https://testmysite.thinkwithgoogle.com/intl/en-us/ テストの方法は非常に簡単で、画面にURLを入力するだけ。例えば、日本で最も多くアクセスされているサイトであるYahoo! JAPANのURLを入れて「TEST NOW」をクリックすると…… ペ

2017/06/22 ファイルをアップロードする前のプレビュー表示など、ユーザーがサーバーにアップロードしなくても画像をウェブページ上に表示する方法です。データURI形式で表示する方法と、Blob URLで表示する方法の2種類があります。 サンプルコードBlob URL、またはData URIを取得し、それをそのままimg要素のsrc属性に指定すれば表示できます。 <input id="target" type="file" multiple> Blob URL document.getElementById( "target" ).addEventListener( "change", function() { var fileList = this.files ; for( var i=0,l=fileList.length; l>i; i++ ) { var blobUrl = wi

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Bootstrap Theme for Japanese. "Umi" は "Honoka" を元にした日本語も美しく表示できるBootstrapテーマです。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 JavaScriptのコード整形や難読化、 リソースのリンク集などなど、Web 制作に地味に役立ちそうなツール を一纏めにしてOSSとして無償配布 しているツール郡、Effin Toolset のご紹介です。役に立つかどうか は個人差もあるでしょうけど・・ データスキームURI変換ツールやJSコードの整形、難読化ツールなどなど様々なツールが一纏めにされてGithubで無償公開されています。 便利そうなものからネタ的なものまでツールいろいろ。 dataurl ↑ 画像をドラッグ&ドロップしてdataスキームURIに変換するやつ Escaper ↑ CSSのcontentプロパティで特殊文字等を使う際にUnicode エスケープシーケンス形式に変換するツール jjenc

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルな日付ピッカーを実装する 為のスクリプト・Pikadayのご紹介。 jQueryなどに依存せず、独自で動作 する非依存型スクリプトなので使い やすいのでは無いかと思います。 シンプルな非依存型のデートピッカーです。ありそうでないような。 普通のデートピッカーです。他ライブラリを必要としないので手軽に使えそうですね。圧縮版で9KBほど。jQuery依存版も一応あるみたいです。 Sample 動作サンプルです。日本語にはまだ直してないです。 コード <script src="pikaday.js"></script> <script> var picker = new Pikaday( { field: document.getElementById('foo'

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 JSONデータを編集できる、という Webアプリ、JSON Editor Online のご紹介。Githubでソースコード も公開されていました。個人的に はあまり使う機会は無いですけど 後学のためにメモ。 オンライン上でJSONを編集できる、というエディタWebツールです。

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 注目させたい箇所に順々に吹き出し を表示させるWebサイトのツアー コンテンツを実装するjQueryのプ ラグイン・Crumbleのご紹介です。 可愛いデザインでこのままでも使え そうです。 ツアーコンテンツを実装するスクリプト。jQueryを使用します。 吹き出しをクリックすると次の吹き出しが表示されます。かわいい。 尚、吹き出しはgrumble.jsが使われていますので同時に読み込む必要があります。 <ol id="foo" style="display:none;"> <li data-target="span">吹き出し　その1</li> <li data-target=".foo">吹き出し　その2</li> <li data-target="b" dat

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 LocalStorageを使用したモックアップ の作成ツールのご紹介。シンプルで 軽量なので使いやすいです。見やすい し、D&Dで操作出来ます。手軽で使い やすいのは素敵ですね。プレゼン用 なんかにもいいかもしれません。 シンプルなモックアップ作成ツール。githubでもソースが公開されています。Backbone.jsやLocalStorageで作ったそうです。 左のエリアからシェイプやフォームのパーツをドラッグして方眼紙の箇所にドロップする、という普通の流れで作成します。マウスでリサイズやテキストの変更も容易に行えます。 日本語も問題なし。要素を選択すれば下部で変更出来る様になっています。 エクスポートはPNGで発行されます。自分好みにカスタマイズして使うのも良い

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 正規表現コードを色で解読しやすく する、というスクリプト。エラー の有無も分かるので、解読だけで なく、勉強のお供にもいいかもし れませんし、解読速度も速められ そうです。 正規表現コードを色分けしてくれるスクリプト。用途は開発補助・・ですね。

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitter Boostrap用の日付/時間 ピッカーを実装する為のライブラ リ・bootstrap-datetimepickerの ご紹介。日付と時間を同じinput 要素内で取得できます。また、 フォーマットも指定可能です。 デート・タイムピッカーを実装するスクリプト。jQuery依存みたいです。 シンプルに日付と時間を取得するだけのものですが、別のinput要素を用意する必要が無いのはユーザーに優しいですね。 Sample カレンダーの下部に時間ピッカーへの切り替えボタンがあります。 言語を日本語に指定したけどカレンダーはまだ日本語には未対応です。出力フォーマットは自由に設定できます。 コード <script type='text/javascript' s

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 BootstrapでWebサイトツアーコンテンツを実装する為のスクリプト、Bootstrap Tour Extendedのご紹介。閲覧中のページだけでなく、別ページへの移動も可能です。なかなか使い勝手はいい気がしましたので備忘録として。 Bootstrapでツアーコンテンツを実装するスクリプトです。 ツアーコンテンツをツールチップで実装します。 ↑ こんなん。 以下、公式の動作デモです。 Sample var tour = new Tour(); tour.addStep({ element: "#foo", placement: "bottom", title: "タイトルです", content: "文章です。 " + "文章の続き。 " + "<a href=

Webサイトツアーを実装できる、というスクリプトのご紹介。jQueryに依存します。よくある類のものと変わりませんが個人的に使いやすい印象だったので備忘録として。 Webサイトツアーです。そこまで多用する機会は無いのですけど・・ よくあるツアーコンテンツ。キャプチャはオーバーレイですが、オーバーレイ無し等も可能です。 $(document).ready( function() { var tour = $('#foo').tourbus( {} ); } ); jQueryと本プラグインを読み込み、上記のコードを書けば準備完了です。あとはオプションを書いていくだけ。 ドキュメントが非常に充実していますので詳細は本サイトでご覧ください。 jQuery TourBus

Markdown記法で書けるシンプルなブログサービス・Roonのご紹介。スマフォでも閲覧可能なRWD対応のサービスです。メモ感覚で書けるので手軽でいいかもしれません。 ※追記：スペルミスをコピペしてましたorz　修正しました。 シンプルさを追求したブログサービス。Markdownで書けるのも嬉しいです。 ユーザー登録後、すぐに執筆可能です。 書いてアップするだけの作業スペースだけが用意されます。Markdown記法なのも嬉しいですね。 ブログっちゃブログなんですけど、かなりメモに近い感じです。公開すると、シェアだけ出来る様になります。 広告も今の所無いようですね。個人的には好みのサービスでした。 Roon

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Web制作時にあるとちょっと便利なツールをセットで公開しているQuirkToolsのご紹介です。今の所は4つほどですが、今後増えると嬉しいですね。 現在はワイヤーフレームツール、サイトマップの作成ツール、レスポンシブWebデザインの表示確認ツール、スクリーンのデータを教えてくれるツールの4つが公開されています。

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1); エフェクトは上記のように

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies); セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 フリップ（引っくり返す）エフェクト付きのローンディングインジケーターを実装する、というライブラリのご紹介です。目立つのでロード中というのをしっかり明示できそうです。 フリップさせる要素もいろいろと対応してるみたいです。非依存型なので単体で動作します。 フリップさせてローディング中にする、みたいなやつ。 window.setTimeout(function() { iframe.src = 'http://www.youtube.com/embed/xEhaVhta7sI?html5=1&autoplay=1'; }, 2000); Youtubeのようなiframeに切り替える、みたいな事も出来るようです。その場合は上記のようにスクリプト側でパスを指定します。 フリ

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと良さそうだったので備忘録。DB不要のOSSのCMSです。Markdown記法のブログエンジンみたい。インストールはサーバーにおくだけなので1分も掛かりません。 サーバーにおくだけでインストール出来る、DB不要のCMSです。

Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。 Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdownです。実装も楽なので覚えて置いて損は無いかも。 Boostrapに設置可能なMarkdownエディタです。シンプルで使いやすい印象でした。 <textarea name="content" data-provide="markdown" rows="10"></textarea> textareaにカスタムデータ属性を与えればいいみたいです。 <div data-provide="markdown-editable"> <h3>foo</h3> <p>bar hoge fuga</p> </d

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ページ内の目次を自動生成する、というスクリプトのご紹介です。見出しを検出してページ内のナビゲーションを作成出来ます。冗長なページにはあると良さそうですね。 ページ内の見出しを使ってナビゲーションを作成します。現在閲覧中の見出しにもスタイルを当てられますのでユーザーに分かりやすいナビゲーションを作成出来そうですね。 長いページにはページ内ナビゲーションがあると便利。ドキュメントや規約など冗長化しやすいコンテンツと相性良さそうです。 $(document).ready( function() { $(".page_container").jumpto({ firstLevel: "> h2", secondLevel: "> h3" }); }); リンクとして取り出す

オートコンプリートでテキストや絵文字等の入力を楽にしてくれる、というスクリプトです。以前紹介したものと被りますが、選択肢は多いほうがいいですね、という事でメモ。 以前ご紹介した、jQuery.textcompleteと似た機能になります。コメント機能のあるコンテンツにあるとユーザーにも喜んでもらえるかも知れませんね。

送信フォーム等で任意のテキストを手軽にオートコンプリートとして出せるようにする、というスクリプトのご紹介です。手軽さが気に入ったのでメモ。 簡単にオートコンプリート機能を付与できるスクリプトです。ファイルサイズは非圧縮で10KBほど。jQueryに依存しています。 文字を入力すると、いくつかのメールアドレスが候補として表示されます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="completer.min.js"></script> 本体とプラグインを読み込みます。 <input type="text" completer data-separator="@" data-source="['gmail.com', 'live.com', 'yahoo.ne.jp', 'i.s

textareaやinput要素内の任意のテキストをハイライトするjQueryプラグインのご紹介です。どこかで利用する機会があるかと思ったので備忘録。 フォームの入力項目でユーザーの入力したテキストに、設定したテキストがマッチしたらハイライトする、というもの。 東京と江戸をハイライト設定しています。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.highlighttextarea.min.js"></script> 本体とプラグインと用意されているCSSを読み込みます。 $('textarea').highlightTextarea({ words: [{ color: '#ADF0FF', words: ['foo'

任意の2つのテキストの差分をチェックして変更箇所の割り出しと結果の共有ができる差分チェッカー、Diff Checkerのご紹介。動作も早くて便利そうだったのでメモがてら。 ドキュメントの差分チェックツールです。 左右のカラムにテキストを入れてチェックすればいいだけ。変更箇所が割り出されます。 ↑ こんな感じで割り出されます。変更点がピンポイントで出ると嬉しいですけど、日本語だと上記のように文章まるごと扱われるみたいです。 個人的には使いやすくて好きでしたが、既存ツールも数多にあるのであえて選ぶ理由があるとすればユーザー登録出来る点とURLの発行・共有可能な所くらいでしょうか。 とはいえ、国産のdifff《ﾃﾞｭﾌﾌ》でもURLが発行、共有は可能なのでお好みで。 Diff Checker

近年日本のソフトウェア開発チームでも取り入れられるようになったアジャイル/DevOps開発では,今まで主流であったウォーターフォール開発と異なり,短い開発サイクルの中で小刻みなフィードバックループと改善活動を繰り返しながら開発する特徴がある.そのため,品質保証や信頼性でのメトリクス活用においても,メトリクスにもとづいたQAテストを実施することは依然重要であるが,それに加え開発から運用までの一連のプロセスの中でプロダクトとプロセスの品質を見える化し継続的な改善活動を促進するフィードバックを提供することがアジャイル開発では求められる.また、DevOps開発では本番稼働中のシステムについてもレジリエンスの枠組みで障害やバグに関するフィード バックを獲得し継続的に学習する.本講演ではアジャイル /DevOps の品質保証と信頼性におけるメトリクス活用の方法について事例も交えながら紹介する.

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 世界205の国と地域、12万1000社以上に導入されている（2016年12月末時点）ビジネス用途向けのコミュニケーションサービス「チャットワーク」を展開するChatWork社は201�7年1月12日、新機能を搭載したPC向けアプリの最新バージョンを公開しま

統計とユーザビリティのコンサルティングを行っている会社、MeasuringUの創始者です。 20以上の記事、統計とユーザーエクスペリエンスに関する５冊の本の著者です。 アンケート調査が有用かどうかは質問のクオリティに依存しますが、その質問を考案することは一種の芸術であり科学でもあります。あなた、あるいは調査を委託する機関のニーズと、回答者の負担とのバランスを保つ必要があります。 ここでは本や記事から導き出した、我々が使っている12の役立つガイドラインの要約版をご紹介したいと思います。 1. 質問は短めに、でも短すぎず 簡潔なライティングと良いコピーライティングによって、質問は短く明確になります。即座に核心をつき、シンプルな文章を心がけましょう。 つなぎのフレーズ（「〜のために」、「〜の目的として」など）で長くなりすぎないように注意しましょう。とはいえ、簡潔さを求めるゆえにあまりにも短い質問

はじめに 最初の一歩を間違える 勉強の方針まとめ 巷で有名な教科書を読む 参考記事 流行りのフレームワークを入れる 参考記事 インターネットで知識を詰め込む 参考記事 目的と合っていない手法に着手 はじめに 新年始まって、機械学習始めよう！と意気込んでる方もいらっしゃると思います。 そしていきなり ・専門用語 ・プログラミング ・数式 などの壁にぶつかり諦める方も多いと思います。 しかし、ちょっと待ってください。方針が（というか最初の一歩）がたまたま間違っていただけで、まだまだいくらでも手立てはあるはずです。 今回は機械学習始めてみようと思ったけど、全く何すればいいかわからない人たちに向けた勉強方針をまとめたいと思います。 最初の一歩を間違える まず最初の一歩を間違えるパターンがいくつかあると思います。 それを思いつく限りあげてみます。 ・巷で有名な教科書を読んでみた ・最近流行りのフレー

Webの技術でデスクトップアプリが作れるフレームワークといえばElectronが有名ですが、より手軽に使えるのがNW.jsです。デザイナーでもちょっとしたデスクトップアプリならすぐに作れちゃいますよ。 NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 ハイブリッドアプリがすばらしいのは、単になじみのある言語（HTML、JavaScript、CSS）で書けるというだけでなく、本質的に次のような普通のWebアプリよりも優れた点があるからです。 ブラウザーの種類とバージョンをコントロール

無料アプリ「Duolingo」は、母語でない語学を楽しく学べるように工夫されたサービスで、2013年にはAppleが選ぶ年間ベストアプリ「iPhone App of the Year」にも選ばれるなど高い評価を得ています。そのDuolingoでは学習を効果的に行うためにどう復習すれば良いのかを、機械学習を利用した記憶の忘却ペース予測によってユーザーごとに個別に判断し、確かな学習効果を上げているそうです。 How we learn how you learn | Making Duolingo Blog http://making.duolingo.com/how-we-learn-how-you-learn Duolingoアプリには、「skill strength meter」と呼ばれる指標があります。以下のアプリ画面の各アイコンの下に表示されている、オレンジ色のアンテナのようなマークが

ぶっちゃけ今更感がなくもないんですが、実はこれまで自分ではほとんど異常検知・変化検知をゴリゴリやったことがなかったなぁと思ったのでした。きっかけは、時々色々な手法のテストに使っているこのUCI機械学習リポジトリのデータセット。 UCI Machine Learning Repository: Water Treatment Plant Data Set これは説明にもあるように、とある都市部の下水処理場の様々なセンサからのインプットを合わせて日次でまとめたデータセットです。この手のプラントデータセットにありがちな課題がまさにその異常検知で、要は何か不具合があった日付を事後で良いので検出したいというお話です。 異常検知自体は、以前このブログでさらっとだけ取り上げたことがあります。それは{AnomalyDetection}パッケージの紹介記事。 この時は{AnomalyDetection}が依