PHP と JavaScript の噺Capistrano の簡単な説明からredmine のデプロイまでの資料です。 サンプルのソースコードは、こちらです。 https://github.com/totty/redmine_deployer
【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript ｜ KLUTCHE
最近ではページ内でリンクを飛ばす際には当然の仕様となっているスムーススクロールを簡単なタグで実現します。 どうだい？スムースだろ？ デモページ 個人的にこの動きが大好きです。 1時間くらいならずっとスクロールを見ていられます。 鬱の時なら半日はいけます！ HTML <a href="#bottom">下へスムース！</a> なにも工夫しなくて良いです。 ただ＃をつけてアンカーポイントへリンクを貼るだけです。 jQuery依存のスクリプトなので、head内でjQueryを呼び出しましょう。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> その後に以下のスクリプトを書きます。 <script type="text/java
700を越えるJavaScriptライブラリを自由に試せるページを作った - 詩と創作・思索のひろば
こちらです ☞ JavaScript Libraries Playground（jQuery 2.1.0 と underscore の例） jQuery や underscore などの JavaScript ライブラリをインタラクティブに試したいとき、最近はブラウザで自分のブログ（ここ）や GitHub など、当該のライブラリがロードされていることを知っているページを開いておもむろに ⎇⌘J（Chrome）！ していたのですがこれは直接的ではないなと思ってそれ専用のページを作った次第です。 冒頭の例にもあるように location.search 部に library[@version],… 形式でライブラリを与えてやればページに <script> 要素が追加されて、あとは開発者コンソールなりでお楽しみください、という仕組みになっています。 cdnjs にはかなり多くのライブラリがホストさ
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
HTML/CSS/JavaScript初歩の初歩
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい！ プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
僕がプログラミングできない理由 — 「まずは、言葉にしてみましょう」の意味
知らない人がいると困るので、真っ先に書いておくけれど、僕はプログラマーではない。まったくもって、違う。 わずか、４年ほど前、退院後の自宅療養の時期にふと手にしたWeb関連の本に触発されて、HTMLやコンピュータ言語に少し興味をもつようになっただけのことだ。 本気で、自分が複雑なプログラムを書けるようになると考えたわけではない。 ひょっとしたら、僕にだってプログラムが書けるようになるかもしれない、少なくともそんなチャンスくらいはあるのかもしれないと、思っただけのまったくのど素人だ。 50歳を目の前に控えた僕が、プログラムを学ぶために、学校に行くなんてことは到底不可能だった。だけれど、学校に行かずして、しかも無料で学ぶということに関しては、今はいい時代でもある。 ネットで探せば、いろいろとプログラムを教えてくれる講座やブログがあるし、ソースコードを明らかにしてくれるものもある。 ドットインスト
JavaScript版スーパーマリオブラザーズがすごすぎ | 教えて君.net
スーパーマリオブラザーズといえば「世界一売れたソフト」として有名な ファミコンゲーム。 任天堂の名前を世界に知らしめた名作だ。不朽の名作がJavaScriptに よって再現された。「スゴイ！」の一言に尽きるので、まずはお試しあれ。 マリオのファビコン（Favicon）もイカしてるぞ。 「Enter」キーを押すことでゲームが開始される。左右の矢印「←」「→」キーで 前進と後退ができる。「A」キーがダッシュ、「S」キーがジャンプ。くれぐれも お家に帰ってから遊ぼう。仕事中に夢中になってるのを上司に見つかってリストラ されても責任は取らないからね！ Javascript Super Mario Bros + Complete Level 1 and 2 + Map Editor By Guillermo Bruchmann
javascriptを理解するためのたった2つの大切なこと:改
9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
AngularJS、次バージョンとなるAngularJS 2.0の開発がスタート
Googleがオープンソースで開発しているJavaScript用のMVCフレームワーク「AngularJS」は、テンプレートエンジンの機能やアニメーション機能、フォームバリデーション、ローカライゼーション機能、依存性注入（DI）など、非常にリッチなフレームワークになっています。 AngularJSの現行バージョンは1.2ですが、メジャーバージョンアップのAngularJS 2.0に向けて作業が始まったことが明らかになりました。 現在はまだプロトタイピングの段階としていますが、AngularJS 2.0は次のようなデザインを考えているようです。 モダンブラウザ対応 Chrome、Firefox、Opera、Safariに加え、Internet Explorer 11以降、およびモバイル対応ブラウザなど、モダンブラウザのみ対応する。 ECMAScript6+ AngularJS 2.0のコード
プラグインなしでブラウザ上でUnityで開発したゲームが動作可能に
WebGLやasm.jsの技術を駆使し、専用プラグインなしでもブラウザ上でUnityで開発したゲームを動かすことが可能になると、MozillaとUnityが発表しました。 Mozilla and Unity Bring Unity Game Engine to WebGL | The Mozilla Blog https://blog.mozilla.org/blog/2014/03/18/mozilla-and-unity-deliver-award-winning-game-engine-to-the-web/ UnityはWindows・Mac OS X・ウェブブラウザ・Flash プレイヤー・iPhone・iPad・Android・Wii・Wii U・PS3・Xbox 360など幅広いプラットフォームのゲーム開発に対応したツールで、2005年にOS Xに対応したゲーム開発ツールとし
ウェブサイトの使い方を目の前でアニメーションして説明するスクリプトをどんなサイトにでも埋め込める「Embedded Help System」
目の前でマウスカーソルを動かして説明すると理解してもらえるという場合に使えるのがこのjQueryのプラグインとして動作する「Embedded Help System」です。どのようなサイトにでも埋め込んで使うことが可能となっており、最大の特徴は実際のフォームやチェックボックスなどを操作する様子を目の前で見せてくれるという点。 一体何を言っているのかわからないと思いますが、これは実際に目の前でデモを見てもらうのが一番わかりやすいです。 デモは以下から。 Embedded Help System http://embedded-help.net/ デモを見るにはこの「Usage」ページにまずはアクセスします。 次に「Search database」をクリックするとこのようにしてクリックして使う順番の数字がふわっと浮かび上がります。これだけでも割とわかりやすいのですが、ここからが真価を発揮すると
MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」
MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。 3DCGコンテンツをjQueryスタイルで作るJavaScriptライブラリ - jThree http://www.jthree.jp/ 実際にウェブページ上でどんなことができるようになるのかは以下のムービーを見れば分かります。 「jThree」を使うとウェブページ上でこんなことができるようになる - YouTube jThreeのトップページにはデモページが3つ用意してあるので、今回は「千本桜 + カゲロウデイズ
Bootstrap
Get started any way you want Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. Read installation docs Install via package manager Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also use any demo from ou
エンジニア必見！Webデザイン・制作に役立つサイト26選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
マガンダング ハーポン！最近エンジニアに転職したひろゆきです。 詳しくはこの「フィリピンでプログラムと英語が学べる、ギークスキャンプがスゴイ！！」を読んでください。 今回はLIGエンジニアチームが普段情報収集の際に活用しているサイトをまとめてみました。俺のように最近エンジニアデビューした方は必見です！ WordPress関連（プラグインの検索、関数の解説など） ■WORDPRESS.ORG 日本語 http://ja.wordpress.org/ WordPress公式の日本語サイトです。フォーラム見たり、プラグイン検索に便利です。 ■WORDPRES.ORG 英語 http://codex.wordpress.org/ WordPressの公式リファレンスサイトです。WordPressの関数だったりフックを探す時に使います。英語ですが、情報量は日本語サイトよりも多いです。 ■WORDPR
JavaScriptやCSSを圧縮／軽量化できるサービス「Minifier」 | ライフハッカー・ジャパン
「Minifier」はJavaScriptやCSSを圧縮・軽量化できるサービスです。圧縮したいコードをコピペしてワンクリックで圧縮・軽量化できますよ。 以下に使ってみた様子を載せておきます。まず、Minifierへアクセスしましょう。圧縮するファイルの形式（JavaScriptやCSS）を選択します。その後、圧縮したいコードを貼り付けて「Compress」します。 このように圧縮・軽量化されたコードが生成されました。また、このように難読化されたコードをデコードすることもできます。JavaScriptやCSSを書く方は要チェックですね。ぜひご活用ください。 Minifier （カメきち）
marquee - hitode909の日記
marqueeタグ，最近人気ないけど，かわいいので，使っていきたい．今日の日記もmarqueeにすることにした．あなたの意図に反してこの文字が流れていたら私の意図通りこの文字が流れていると言える．フィードリーダーとかではmarquee出せない気がするので，わざわざ元のページ開いて見てほしい．現実世界には，あまり流れる文字ない気がするけど，巻物とかがんばって巻くとmarqueeになる．本はmarqueeじゃなくて，Page Downという感じだから，あまりもう紙では見ることない気がする．身近なmarqueeとしては，新幹線とか乗るとmarquee見れる．自分が新幹線作ることを考えると，乗客にmarqueeを見せ続けて便利というのは不気味だから，新幹線考えた人は偉い．普通は乗客にmarquee見せようと思わないと思う．あと京都駅の駅前に防災情報みたいな電光掲示板が設置されてて，そこでmarqu
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法
知っていれば恐くない、XMLHttpRequestによるXSSへの対応方法：HTML5時代の「新しいセキュリティ・エチケット」（3）（1/2 ページ） 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。前回は、同一オリジンポリシーを突破する攻撃の代表的事例であるXSSについて、特にDOM based XSSと呼ばれるものについて解説しました。今回はその続きとして、XMLHttpRequestによるXSSを解説します。 XHR Level 2によるリモートからのコード挿入によるXSS 従来、XMLHttpRequest（以下、XHR）は、表示しているドキュメントと同じオリジン（オリジンについては第1回を参照）としか通信できませんでしたが、現在の主要なブラウザーではXHR Level 2と呼ばれる実装により、オリジンを超えて通信することが可能になっています。 これは、Jav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2014/03/21/51257/
mizchi / すべてのMVCを過去にする - Glide
