Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

12. 役割分担 Product Manager Product Manager Project Manager Project Manager Design Quality Budget/Cost Architecture Deadline/Progress Scope Sprint Planning マンガプロダクションと担当編集の関係に着想

jQuery.fullPhotoDialogはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 モバイルファーストなんて言葉が叫ばれていますが、まだまだ技術界隈ではデスクトップをメインターゲットにしているように見えます。なので類似したライブラリでもモバイル対応とするだけで付加価値になるのです。今回は写真を拡大表示するjQuery.fullPhotoDialogを紹介します。 デモです。テキストは気にしないでください。 ボタンをクリックすると画像を大きく表示しました。 モバイル対応とあってレスポンシブです。 jQuery.fullPhotoDialogはとてもシンプルな写真ダイアログで、中央に大きく写真を表示して右上にタイトル、左上に閉じるための×ボタン、下にキャプションが出せるようになっています。意外と多そうでなかったりするので覚えておくと良

EPUB3 SliderizerはBashスクリプト製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 電子書籍はePubファイルとして生成されますが、その中身はXHTMLで記述した後Zip圧縮されています。なので解凍すればWebブラウザでも読める形式なのです。そこでWebブラウザと電子書籍リーダー両方にフレンドリーなEPUB3 Sliderizerを紹介します。 こちらはWebブラウザ版。目次です。 アニメーション機能もついています。可読性高いですね。 ズームやパン、キーボードショートカットが備わっています。 Markdownがサポートされています。これは嬉しい！ Animate.cssサポート。 こちらはePub版。端が飛び出してしまっているのが残念ですが、ちゃんと読めます。 対応していない文字は化けてしまうようです。 EPUB3 Slideriz

fgalleryはPerl/JavaScript製のオープンソース・ソフトウェア（GPL）です。 ギャラリーソフトウェアを使うとWebページ上で奇麗に写真が表示できます。多数の写真を掲載しようと思うと何らかサーバサイドの仕組みを必要とするものですが、fgalleryを使えばJavaScriptだけで格好いいギャラリーが作成できます。 デモのギャラリーです。左に大きな写真、右に一覧が並びます。 矢印キーで写真を移動できます。 fgalleryではPerlスクリプトを使ってHTML/JavaScriptベースのギャラリーを生成します。写真は自動的に日付ごとにソートされ、写真と動画に対応しています。写真はダウンロードでき、パノラマ写真の表示も可能です。 サーバサイドのシステムを使えばより簡単に実装できるような気もしますが、fgalleryはあえてJavaScriptで実装する点に注目です。変換し

EditrはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 jsdo.itやJSFiddleといったWebベースのプレイグラウンドを自分でも作ってみたい、設置したいと考えている方はEditrをお勧めします！HTML/JavaScript/CSSを組み合わせてWebブラウザ上で実行が可能です。 右側がEditrの編集、実行領域になります。 まずは実行結果。複数のHTMLファイルが切り替えできます。 HTMLソースコード。編集はもちろんハイライト表示にも対応です。 スタイルシート。インポートを使えば外部のファイルも読み込めますね。 JavaScript。評価はリアルタイムにされます。 Editrの主な特徴はGistからのダウンロード対応、水平/垂直表示、リッチなコードエディタ、テーマサポート、プリローダー、リードオンリーモード、Base64対応、外部埋め込み

Ready-to-use plugin All you need is an HTML markup, call the script and BAM! <div class="main"> <section>...</section> <section>...</section> ... </div> $(".main").onepage_scroll(); Pretty Neat Eh? You can customise the animation timing, the selector or even the animation easing using CSS3. I can't wait to see what you guys will come up with. Don't forget to grab them for free on Github'

Drawingboard.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 コンピュータ上に絵を描くのはとても面白いですよね。しかし専用のソフトウェアが必要で、そうそう簡単にできるものはありません。しかしDrawingboard.jsを使えば自分のWebイト上にドローボードを埋め込んでしまえるのです。 例えばこんな感じ。線の色、太さ、が自由に変更できます。 カスタム例。線の太さを数値ではなく選択式にしています。 Drawingboard.jsはCanvas上でドローを実現しています。そしてその結果を画像として取り出すことも可能です。画面いっぱいに広げることも、小さなウィンドウでイラストを描くこともできますので自由な配置で楽しめるでしょう。 多機能さを求めるときりがありませんが、Drawingboard.jsくらいの色と太さだけが変えられるレベルのド

DOCX.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Microsoft Officeのファイル形式は〜x形式になって以降、XMLファイルのZipファイルの圧縮であることはよく知られています。しかしだからといってOfficeファイルをWebベースで生成できるようになっているとは思いませんでした。それを可能にするのがDOCX.jsです。 テストページ。Run Testをクリックします。 生成されました！ 該当部分のコード。 DOCX.jsは今のところテキストを挿入しかできません。画像やOLEオブジェクトを貼付けたりすることはできないのでご注意ください。とは言えWebブラウザ上でZipファイルを生成してしまえばここまでのことができるのかを驚かされること間違いなしです。 Microsoft Officeファイルの仕様は公開されていますので、それをJ

pngpasteはC言語製、New BSD Licenseのオープンソース・ソフトウェアです。 Mac OSXでターミナルを使っている時にpbcopyコマンドはよく使われます。しかしこれはテキストにしか使えません。そこでインストールしてみたいのが画像でもpbcopyができるようになるpngpasteです。 Homebrewでインストールできます。 pngpasteの後に出力先画像ファイル名を指定するだけです。 pngpasteがどんな時に使えるかというと、Webブラウザで画像を右クリックでコピーした後、任意の場所ではりつけができます。クリップボードに入った画像データを貼付けるのみというシンプルな作りですが、そこが面白さとも言えるソフトウェアです。 コマンドラインですと、他のコマンドとも合わせてさらに拡張したり、プログラミング言語のコマンド実行関数と合わせて使い回すこともできます。Webブラ

Bespoke.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 単に情報を並べて表示しているだけではユーザは見向きもしてくれません。そこに一工夫することでユーザの目を引く面白いコンテンツになります。今回はスライドを格好よく表示するBespoke.jsを紹介します。 デモの1例。Cover Flow風にスライドが右に表示されています。 左右の矢印キーでスライドがアニメーションしながら切り替わります。 こちらはシンプルに左右のスライドに差し代わるデモ。 四角版。 多角形。アニメーションはスムーズで気持ちいいです。 Webサイトの説明をスライドで表示していったり、勉強会などでも使えるかも知れません。左右に見えるスライドが次のページを期待させるのでユーザの見逃しを防いでくれそうです。 Bespoke.jsの利点として表示領域があまり大きくないので自ずとテ

Pick up the 9th-gen iPad with two years of AppleCare+ for only $298

サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea

ActiveRecord4でこんなSQLクエリどう書くの？ Merge編 では、関連先のscopeを使うことができるmergeを紹介しました。mergeを使う事で、変更に強いクエリを美しく組み立てることができました。 今回は、ActiveRecord4で書きにくいSQLクエリたちを紹介します。 書きにくいクエリとは、具体的には以下のものがあげられます。 比較演算ORlikeleft outer joinunionサブクエリexists ActiveRecordでこれらのクエリを組み立てる場合、どうしても美しくない（SQL文字列をべったり書いてしまうような）書き方となってしまいがちです。 この処理を美しく書くためには、ActiveRecordだけの機能では足りず、ActiveRecordが内部で使っているArelというライブラリを使う必要がでてきます。 今回は、Arelを使って華麗にSQLク

ActiveRecord4でこんなSQLクエリどう書くの？ Merge編 #activerecord#rails#ruby 2013年 10月 24日 nishio 「このデータ取得するのにSQLではこういう風に書けばいいんだけど、ActiveRecordでは一体どう書けばいいの？」 毎回この課題に悩まされています。 特に業務アプリの場合、とてつもなく複雑なSQLを投げる場合があります。 ものすごい数のテーブルをjoinして、existsで条件みて、union allして。。。 なんていう処理がでてくると、さすがにActiveRecordやDatamapperを使ってクエリを組み立てるのをあきらめて、直接SQLを書いてしまうことがあります。 でも、できればActiveRecordを使ってスマートにSQLを組み立てたいものです。 scopeで書いておけば、処理も使い回せますしね。 ということ

Twilio 盛り上がってきていますね。電話という身近でありながらシステムとして扱うには複雑な仕組みが必要なものを単純な API で操作できるというのは面白いサービスです。 先日大阪で行われたTwilio API勉強会@大阪にて、PHP から Twilio を触ってみるハンズオンセッションを行ないました。Twilio を使うと簡単な PHP コードで、自分の携帯を鳴らしたり、携帯から電話をかけてみたり、簡単に試すことができるので、これはハンズオンとしてもなかなか楽しかったです。 お声がけいただき、ありがとうございましたm(_ _)m 発表資料はこちら。 ハンズオンの手順は、Gist に書いています。ここでは、Composer を使って、twilio-php（PHP版のTwilioライブラリ）をインストールしています。 https://gist.github.com/shin1x1/7006