高機能フィードリーダーがオープンソース化·Feedbin MOONGIFT
FeedbinはRuby/Ruby on Rails製のオープンソース・ソフトウェア（MIT License）です。 Googleリーダーの終了アナウンス発表後、雨後の筍のように出現したリーダーサービスも落ち着きを取り戻しつつあります。多数のサービスが生まれ、間違いなく多数のサービスが終了していくと思われますが、そんな中Feedbinはオープンソース化という道を選択したようです。 サインナップします。 3カラムの構成になっています。一番左がフィード一覧、中央がエントリー、右がエントリーの内容を確認する画面です。 スター登録もできます。 設定画面です。タグやAPIなど多数の機能があります。 シェアに際して外部サービスへ飛ばすこともできます（例えばApp.netが紹介されています）。 Feedbinは基本的な操作はキーボード主体でできるようになっています。サポートしているデータベースはPost
nodeを使ってapkファイルを解析·apk-parser MOONGIFT
apk-parserはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 AndroidアプリのAPKファイルにはアプリケーションがどんな機能を必要としているか、作成者は誰かと言った情報が埋め込まれています。それを解析し、データ出力できるのがapk-parserです。 単純にパースして出力した例です。 さらにパーミッションだけを取り出した例。 apk-parserはnodeを使ってAPKを解析し、様々な情報を取り出せます。AndroidManifest.xmlの解析を行っているとのことで、その際にはAndroid SDKのaaptツールを使っているとのことです。Androidアプリを使った何らかのサービスを作ろうと思ったら試してみたいソフトウェアです。 MOONGIFTはこう見る Androidでは思想として自由さがあります。そのためもあってマルウ
オンラインから自分のDropboxへファイルを送ってもらう·dbinbox MOONGIFT
dbinboxはRuby/Sinatra製のオープンソース・ソフトウェア（MIT License）です。 メールではなくDropboxにファイルを送って欲しいなと思ったらdbinboxを使ってみましょう。自分専用のURLを使って任意の相手からファイルを送ってもらえるようになります。 まずDropboxと認証を交わします。 接続されました。専用のURLへアクセスします。 そうするとファイルのドロップするエリアが出ますので、ここにファイルを置いてもらいましょう。 ファイルの送信中。 dbinbox上で追加したファイルがDropbox上に送られてきました。 ファイルではなくメッセージを送ることもできます。実際にはテキストファイルが作成される形です。 メッセージの内容。IPアドレスも記録されています。 設定画面。アクセスコードの指定ができます。 dbinboxは自分専用のボックスがオンライン上に配
70を越えるOAuthプロバイダに対応した認証デーモン·OAuth daemon MOONGIFT
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
必要な情報に素早くアクセスできるスライドメニュー·Multi-Level Push Menu MOONGIFT
Multi-Level Push MenuはJavaScript製のソフトウェア（ライセンスは独自。利用は自由）です。 Webサイトのメニュー表示はいかに深い階層であって素早くアクセスできるかが大事です。そこで今回はMulti-Level Push Menuを紹介します。スマートフォンに似たスムーズなメニュー表示が特徴です。 一例。オープンすると左からメニューが表示されます。 深い階層に行く度に左からメニューが追加（プッシュ）されてきます。 こちらは別なメニュー。同じ幅で上書きされて、上にBackリンクが表示されます。 こちらの場合は上記二つを組み合わせたスタイルになっています。 デモ動画です。上記3つのパターンを試しています。 親メニューが右側に残っているパターンですと、そこをクリックして複数階層を一気に戻れるようになっています。アパレルやコマースなどジャンルの多い商品を扱ったサイトなど
Google Chromeを使って出退勤を入力·Google Chrome Kintai MOONGIFT
Google Chrome KintaiはGoogle Chrome用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Webベースで勤怠管理を行っている企業が増えていますが、つい入力を忘れてしまったりします。そこでクリック一つで出退勤を管理できるGoogle Chrome Kintaiを使ってみましょう。 設定画面です。出退勤を打刻するURL、ログイン画面、出退勤する時間をそれぞれ設定します。 Google Chrome Kintaiはアドレスバーの横に待機します。 時間になるとダイアログが出ますので、OKを押せば良いだけです。 Google Chrome Kintaiは外部の就業管理サービスに対応しているようです。特定のパラメータを飛ばすだけで出退勤が管理できるのでChromeからも簡単に運用ができそうです。他にも色々応用ができそうです。 MOON
CIのビルド結果をChromeで受け取る·BuildReactor MOONGIFT
BuildReactorはGoogle Chrome用のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 最近は継続的インテグレーションを実現するサーバ、サービスが人気です。コードをプッシュしたりデプロイするタイミングで自動で処理を行ってくれるのは便利ですが、その結果をリアルタイムに知りたいと思うでしょう。そこで使ってみたいのがBuildReactorです。 インストールします。Chrome Web Storeでインストールできます。 権限の確認です。あまり多くありません。 まずサービスを追加します。TravisやJenkinsをはじめ、外部のサービスも多数登録されています。 今回は例としてTravisを使ってみます。 ユーザ名を入れると登録されているプロジェクトが出てきます。 Jenkinsの場合はURLを含めて設定を行う必要があります。 後は待っているとデスク
nodeを使ったWebシステム開発のベースに·MEAN MOONGIFT
MEANはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 PHPでWebサービスを立ち上げる場合にはLAMP構成が有名です。他にもWAMPやMAMP、LNMP、LEMPなんて組み合わせもあるそうです。今回紹介するのはMEAN、MongoDB+Express+AngularJS+Node.jsという組み合わせのシステム開発です。 インストール中。ベースになるシステムがGitHub上に公開されています。 起動しました。簡単なテンプレート（Bootstrapベース）も内包されています。 サインナップ。設定すればOAuthも利用できます。 ログインしました。 記事を作成します。 作成しました。編集もできます。 システム構成はこのようになっています。 MEANではテンプレートエンジンにJadeが使われています。O/Rマッパーもありますし、MVCに分かれ
アクセシビリティチェックに。色覚異常を再現する·ColorScope.js MOONGIFT
ColorScope.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 インターネットの裾野が広がるのに合わせてWebページのアクセシビリティは大事な要件になってきました。今回は色覚異常を再現するブックマークレットColorScope.jsを紹介します。 ブックマークレットを実行すると、様々な色覚異常の条件が表示されます。 一つ実行しました。暖色系の色がぐっと弱まったのが分かるかと思います。 また別なブックマークレット。背景色が変わりました。 こちらは全体的に色味がなくなり、茶系になっています。 さらに別なものはグレー系の色合いになっています。 ColorScope.jsを使うとテキストはもちろんのこと、画像も色が変わっています。これはCanvasを使って画像を変換しているとのことです。ただし外部ドメインの画像に対しては適用されないとのことなのでご
PHP Debug Bar
Debugging in PHP has never been easier The DebugBar integrates easily in any projects and can display profiling data from any part of your application. It comes built-in with data collectors for standard PHP features and popular projects. Install the debug bar using Composer: { "require": { "maximebf/debugbar": "1.*" } } $ php composer.phar install The DebugBar has two parts: the main DebugBar obj
iPhoneアプリでのちょっとした入力に使えそう·MZFormSheetController MOONGIFT
MZFormSheetControllerはObjective-C製、iPhone用のオープンソース・ソフトウェア（MIT License）です。 iPadアプリで時々使われるモーダル画面のUIModalPresentationFormSheet。それをiPhoneでも使えるようにしつつ、さらに便利な機能を追加してくれるのがMZFormSheetControllerです。 デモアプリ。この一つ一つがデモになっています。 上からスライドしつつモーダルウィンドウが表示されました。 別画面へのスライドの仕組みもあります。 タブバーの追加もできます。 画面幅いっぱいに表示もできます。幅は指定可能です。 上ぎりぎりに配置したパターン。 Facebookの共有を利用したデモ。 MZFormSheetControllerではユーザの入力を確実に行わせることも、グレーアウト部分をタップすると消すこともでき
Web上でインタラクティブな図を描く·JointJS MOONGIFT
JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。 Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。 こんな複雑な図の描画も行えます。 マウスオーバーで線の削除ができます。 線のポイントを変更して曲がり方を変えることもできます。 組織図。こちらも移動ができます。 ER図。リレーションの関係も表せています。 DEVSの図とのこと。 チェス。オブジェクトの動きはチェス盤上に固定されます。 アニメーション付きの図です。 リンクの表現も多様です。 UMLのクラス図。 ステートチャート図。 JointJSでは多様な図を描くことができます。図はドラッグして動かすこと
外部コンテンツを埋め込むためのJSON生成·Iframely MOONGIFT
Iframelyはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 今はソーシャルサービスが隆盛で、外部サービスにコンテンツを投稿することが多いかと思います。そうして登録したコンテンツを再利用しやすくするサービスがIframelyです。 一例。500pxに投稿した写真を埋め込みやすくします。 アイコンやサムネイルなども取得できます。 Vimeoを埋め込む場合。そのまま動画の再生も可能です。 サムネイルの場合は動画ではなく画像です。 SoundCloudを指定した場合もそのまま音楽再生ができるようになっています。 サムネイルは音楽ジャケット。 ブログ記事の場合。Twitterカードに送る際のデータ確認もできます。 MOONGIFTの場合。メタタグの確認とサムネイル画像の表示ができています。 Open Graph用の確認もできます。 オリジナルデー
要注目！高機能HTMLスライスツール·HTMLButcher MOONGIFT
HTMLButcherはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（New BSD License）です。 画像で作成したデザインからHTMLを起こすのにPhotoshopがよく使われます。スライスツールを駆使して行われているかと思いますが、今回はその専用ソフトウェアHTMLButcherを紹介します。 適当な画像を開きます。 枠を作ったり、その名称を決めます（これが出力時のクラス名になるようです）。 実例（公式サイトより）。細かく指定することでより正確なHTMLデータが出力されます。 HTMLButcherではテーブルタグを使う、または使わないレイアウトが選択できます。使わない場合はスタイルシートで場所を指定する形になります。レイアウトのマスクを作成して、同じようなレイアウトの画像に対して使う回す事もできます。入力ファイルには通常の画像に加えてPSDも利用
FirefoxでのWebアプリケーション開発を強力にサポート·JavaScript Terminal MOONGIFT
JavaScript TerminalはFirefox用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 FirefoxにはJavaScriptコンソールが備わっています。ちょっとしたJavaScriptのデバッグであれば十分ですが、より高機能なコンソールが欲しいと思っている方はJavaScript Terminalを使ってみましょう。 インストールします。再起動は不要です。 デベロッパーツールにJSTermというボタンが追加されます。 色を変えてみました。 まさにターミナル風にコマンドを打って評価していけます。 [+]をクリックすると詳細が表示されます。本当はメソッドの一覧を出せるようです。 複数行の技術に対応しているので、関数を作って実行させることもできます。 :coffeeとするとCoffeeScriptでの記述もできるようになります。 Coff
HTML5ゲーム開発の参考に·Canvas tetris MOONGIFT
Canvas tetrisはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 今後Webブラウザ向けに作られるゲームは増えていくと思われます。そこで既存のゲームを参考にするのはいい方法ではないでしょうか。今回はHTML5で作られたテトリスCanvas tetrisを紹介します。 意外と落ちてくるスピードは速いです。 aキーで回転、後は十字キーでブロックの移動です。一列並べれば消えます。 Canvas tetrisではスコアやレベルと言った概念はありません。落下してくるブロックを並べて消すのみです。ゲームとしてはまだまだですが、基本的な機能だけはできており遊ぶことはできます。 MOONGIFTはこう見る Canvasを使うと高度なグラフィックスを実現できますが、利用については難しいイメージがあります。そこで既にできている
Skala Preview
Skala Preview is on hold for now If you’re still using Skala Preview, the latest versions of Skala View can be downloaded from the App Store and Google Play Store by viewing your purchase history and tapping the download button. The latest version of the Mac app can be downloaded here: Skala Preview 2.0.
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
企業法務マンサバイバル : 忘れることを恐れるな
2013年09月08日08:00 忘れることを恐れるな カテゴリビジネス英語 businesslaw Comment(0)Trackback(0) 語学学習本の古典・名著と言われる『外国語上達法』の一節から。 外国語上達法 (岩波新書 黄版 329) [新書]千野 栄一岩波書店1986-01-20 ある人が「語学の習得というのは、まるでザルで水をしゃくっているようなものです。絶えずしゃくっていないと、水がなくなってしまいます。水がどんどんもれるからといって、しゃくうのを止めるとザルははぜてしまうのです」といっているが、これは真実であろう。語学の習得で決して忘れてはいけない一つの忠告は、「忘れることを恐れるな」ということである。 忘れるし、よく覚えないからといって外国語の学習を始める前からあきらめる人には、七〇歳を過ぎた今日でも毎年一つは新しい外国語をものにしておられる私の恩師の話を伝
Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開
Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開 白石 俊平（HTML5 Experts.jp編集長） Web開発のあり方を大きく変えると期待されている、Web Components仕様に準拠した新たなUIコンポーネントライブラリをMozillaが開発していることが明らかになりました（今回のネタ元になった記事はこちら）。 その名もBrickです。 Brickは、Brickは、X-Tagというフレームワークの上で構築されています。 X-Tagは、Web Components仕様に準拠したカスタムコンポーネントを容易に作ることができるようにするフレームワークです。 また、X-TagはPolymerというライブラリが提供するPolyfillを使用しており、IE9を含むモダンブラウザ上でWeb Componentsを利用可能にします。 そもそもWeb Comp
セミナーの集客→コンバージョンをちゃんと効果測定するための3つのチェック点と対処法 | 初代編集長ブログ―安田英久
今日は、セミナーや資料請求（やEC）で、さまざまなチャネルで集客しようとしたときに、どのチャネルがよく効いていたかをアクセス解析でちゃんと測れるようにするためのチェック点と対処法を解説します。 自社セミナーを開催する企業は増えているのではないでしょうか。セミナーをやる以上はターゲット層に多く申し込んで来場してもらうのが大切ですよね。 そのために、広告を出したりいろんなところで告知したりして集客をがんばります。 となると、どのチャネルでの告知が効果的だったかをデータで調べたくなりますよね。個別に調べずに「今回は多かった」「今回は少なかった」だけでは、次回にどうするべきかを判断できませんからね。 しかし、申し込みフローによっては、ただアクセス解析タグを貼るだけでは、「どのチャネルが効いていたか」をちゃんと効果測定できない場合があるのです。 具体的には、コンバージョン数はとれるのですが、コンバー
Onclickとは？ GAイベントトラッキングの設定方法＆レポートの見方［第65回］ | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座
たとえば「onfocus」は、フォームの入力欄にカーソルが当てられたときに何か処理を実行するものだ。たとえば、入力フォームのページで「onfocus」を利用して、入力フォームの入力欄1つずつにonfocusを使ったイベントトラッキングを設定しておけば、どの入力項目までカーソルが進んだのかを把握するといったことができるというわけだ。 _gaq.pushメソッドは、Googleアナリティクスの命令_gaq.pushメソッドは、「トラッキングコードをカスタマイズするための基礎知識［第63回］」でも説明したので、ここでは省略する。 _trackEventメソッドでイベントを記録する_gaq.pushで指定している「_trackEvent」が、イベントトラッキングのもっとも重要な部分、_trackEventメソッドである。イベントハンドラによって_trackEventメソッドが呼び出されることで、ブ
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
ナビゲーションのリンクを分析・評価するには？――実例で解説！イベントトラッキング（1）［第66回］ | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座
前回は、「イベントトラッキング」という手法についての解説を行った。その冒頭でも書いたが、イベントトラッキングの使用例として、 外部サイトへのリンクのクリックPDFファイルのダウンロードFlashコンテンツの各種動作などの「行為」の計測を挙げたが、もしかすると、多くの読者にとっては、これだけでは、具体的な活用方法がピンとこなかったかもしれない。 そこで、これから何回か、イベントトラッキングの活用例を具体的に解説していくことにする。「イベントトラッキング」のトラッキングコードの仕様に関しては、前回の記事を参照してほしい。 リンクのクリックやダウンロードを「イベント」として計測する！ イベントトラッキングの使い方と注意点［第65回］また気を付けておきたい点は、「取れるものは取ってみよう」という態度ではなく、つねに課題や仮説からスタートしてほしいということだ。Webコンサルティング側で仕事をする方
今っぽい Vagrant + Chef Solo チュートリアル - Qiita [キータ]
Vagrant と Chef Solo ってとてもベンリそうに見えてたのですが、ネット上にあるのは断片的な情報が多かったり、そもそもいろんなやり方があって混乱してたので、サックリ始めるためのチュートリアルを書きました。これをきっかけにベンリな Vagrant ライフを堪能して頂ければ幸いです。 [追記10/10/2013] Window 上の Vagrant でも問題なく動きました。ただ1点注意があって、UAC のポップアップに反応しないと、Vagrant か VirtualBox 側でタイムアウトになってしまうので、ポップアップを見張るか、放置したいなら一時的に無効にしておくとよいです。 [/追記終わり] [追記 10/23/2013] VirtualBox 4.3 だとまだうまく動かないようです(私も host-only adapter の作成で VirtualBox 側のエラーになり
![今っぽい Vagrant + Chef Solo チュートリアル - Qiita [キータ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f799b6ddcfc5290695dee685c7759d764e9f8bf1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-1.2.2%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D380%2526txt%253D%2525E4%2525BB%25258A%2525E3%252581%2525A3%2525E3%252581%2525BD%2525E3%252581%252584%252520Vagrant%252520%25252B%252520Chef%252520Solo%252520%2525E3%252583%252581%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252582%2525A2%2525E3%252583%2525AB%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D5d876f6adad1ae396bec202dfb669b43%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-1.2.2%2526w%253D840%2526h%253D500%2526txt%253D%252540taiki45%2526txt-color%253D%252523333%2526txt-font%253DAvenir-Black%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253D6d33845e155d9ed49970dd0b1bc4a73b%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Dfb011efe75c956eb2eac3704a96c2edc)
今更聞けないSSL/HTTPS - Qiita
SSL/HTTPSの仕組みをざっくり理解しながら、 オレオレHTTPSの稼働まで。 0.そもそもSSLって何？ 概要 SSLサーバー証明書とはウェブサイトの所有者の情報、送信情報の暗号化に必要な鍵、発行者の署名データを持った電子証明書です。 SSLサーバーには主に二つの役割があります。 証明書に表示されたドメインの所有者であることの証明 ブラウザとウェブサーバー間でのSSL暗号化通信の実現 一般的には、第三者サービスがWHOISと企業実在情報を照会して証明書を発行します。証明書を発行する人を認証局といいます。 よし、SSLサーバー証明書をつくればいいんだな。 オレオレSSLとは "俺自身が認証局になることだ…" 社会的信用はないSSLなので運用には注意してください。 その前に、暗号化ってなんですか？ # encoding: utf-8 require 'OpenSSL' def encry
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
記録したイベントをレポートで確認する方法 | Googleアナリティクスとは／衣袋教授のGoogleアナリティクス入門講座 | Web担当者Forum
あなたのサイトは大丈夫? 手動ペナルティを受けていないか調べる「手動対策ビューア」をグーグルが公開 など10+4記事 | 海外&国内SEO情報ウォッチ
Googleアナリティクスの数値を活かすのに役立つ2つの「思考のフレームワーク」（後編） | 誰もが受けたい！アクセス解析5分クリニック
Googleアナリティクスの数値を活かすのに役立つ2つの「思考のフレームワーク」（前編） | 誰もが受けたい！アクセス解析5分クリニック