半年間休職してプログラミングの勉強をした - ぼっち勉強会
目次 概要 この記事の目的 なぜ勉強するのか なぜ休職したのか(働きながらではダメなのか) どのようにして休職したか 金銭面の問題 勉強を継続するために気をつけたこと どのくらい勉強したか 何を勉強したか 反省 まとめ 概要 5月に休職しました。 休職開始から今日まで主にプログラミングの勉強をしていました。 11月から仕事復帰します。 この記事の目的 私が休職して勉強することを決めるとき、経験談を参考にしようと思い似たような方がいないか調べました。 しかし、私のニーズに合う情報はほとんど見つかりませんでした。 私と同じように休職勉強を考えている方にとって、少しでも参考になればいいなと思い書きます。 なぜ勉強するのか 私は業務ならば並以上の働きをしていると思っています。 社交辞令もあるでしょうが、社内・顧客ともに良い評価を頂いています。 一方で、経歴を増すごとに自分の中で技術力に対する不安が
【JavaScript】ソースコードを綺麗に表示するdp.SyntaxHighlighter | 渡辺大祐ブログ
ブログなどでよく、プログラムやCSSのソースコードを記述して公開することがある。 このブログでも、自分自身の備忘録のためにいろいろとソースコードを記述していることがおおい。 今までは＜blockquote＞で括ってしたの画像のように表示していた。 もっとすっきりとソースコードっぽく表示したいなぁ～という願望が出てきていろいろ調べてたらやっぱりある！ dp.SyntaxHighlighter 早速ダウンロードして設置してみた。 説明はリンク先のサイトを見てもらえばよく分かると思うが、個人的には＜head＞内が冗長になるがいやだったので、付属のjsファイルも、shCore.jsに追加記述し、cssファイルも自分のcssファイルの末尾に追加した。 すると次の画像のようなすっきりとハイセンスなソースコードが表示できるようになった。 うむ。いいね。 * XMLコードの場合、class=”xml” *
window.onloadを待たずにDOM処理を開始する - ［JavaScript］All About
JavaScript ガイド：高橋 登史朗 Ajaxなど、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。 掲示板 取材依頼 問合せ window.onloadを待たずにDOM処理を開始する 最近、JavaScript+DOMベースでページやエレメントを構築するような場面が、少しずつ増えてきているようですが、 ページのHEAD内でDOM要素をcreateElementはできても、それを、まだ存在しないdocument.body以下のノードへ追加や挿入することはできません。 たとえば、「test」という赤文字を表示させようとして、何の対策もせずに、下記のようなコードを書き、 エラーに見舞われたり、動作しなかったという方も少なくないと思います。 このエラーは、<body>タグによってdocument.bodyのオブジェクトが生成される前にdo
prototype.jsを使ってみる 2-Event.observe
prototype.jsを使ってみる 2-Event.observe 今回はEvent.observeを使ってイベントを追加する方法です。 onloadイベントを記述する際にbody要素に <body onload="hogehoge" > と記述したりスクリプト内に window.onload = function(){ hogehoge } と記述します。 onloadイベントは１ページに１度の記述しか認められておらず複数のonloadイベントを記述したい場合はonload用の関数を別途作成する必要があります。 prototype.jsのEvent.observeを使えばイベントを追加する事ができスクリプトの保守性が著しく向上します。 Event.observe(追加する要素,イベント,関数,段階) 追加する要素にはオブジェクトかIDを記述します。 イベントにはloadやclickなど
イベントに処理を追加する - JavaScript
たとえば、initOther()という関数をロード時に実行したいとします。 通常は、次のようなコードになると思います。 function initOther () { //何らかの処理 } window.onload = initOther; しかし、すでに window.onload に関数が割り当てられている場合、割り当てられている関数が実行されなくなります。 たとえば、 <body onload="initMain()"> ...</body> とあれば、window.onload = initOther; のために initMain() は実行されません。 そこで、addEventListener() メソッドを使用します。Internet Explorerでは addEventListener() メソッドが使えませんので、代わりに attachEvent() メソッドを使用しま
window.onloadについて
window.onloadについて window.onloadは一ページで一度しか使用できません。 ２回以上使用した場合最初に使用した物について認識されません。 (ちなみにエラーも出ません) これで３時間悩んだorz 関連エントリー prototype.jsを使ってみる 2-Event.observe スポンサードリンク to-Rについて JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。 書いてる人 西畑一馬 (株式会社トゥーアール) 代表取締役/フロントエンドエンジニア 株式会社トゥーアールについて 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。 株式会社トゥーアールへのお問い合わせ 検索 著書
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
グラデーション画像を使った陰影効果(その2) - Yaibeen
表示領域中央部は明るく、外周は暗くなるようにしています。 スライドショーで表示させる画像数枚と、陰影効果用フィルタ画像を用意します。 陰影効果フィルタとして利用する画像は、540x300の矩形画像にグレイスケールの円形グラデーションを描画したものです。 このサンプルでは3枚の画像を左から右へ若干回転させながら移動させることで浮遊感を出しています。このスライドショーに、『陰影効果』画像をブレンドモード『multiply』で重ねることで中央部のみ画像が明るくなる仕組みです。 カスタムプラグイン機能を使用しています。詳しい利用方法はELZのFPEマニュアルを参照して下さい。 円形陰影効果用フィルタ画像 スライドショーで利用する画像の縮小イメージ FPEに読み込ませる定義ファイル(xml)の例 <?xml version="1.0" encoding="UTF-8" ?> <pagedata> <
新JavaScript例文辞典
このページはJavaScriptの例文／サンプルを掲載しています。なお、対象としているのは基本的にWeb標準ブラウザ (Firefox, Safari, Google Chrome, Operaなど) としているため標準仕様から外れているInternet Explorer 6～8では動作しないものがあります。Internet Explorer 8より前のバージョンに関しては以前のJavaScript例文辞典を参照してください。このサイトではInternet Explorer 8以降には、ある程度対応しています。IE9からはCanvasなどHTML5関連APIにも対応しています。 iPhone/iPadおよびAndroid 4もHTML5に対応しています。ただし、Android 2.xに搭載されている標準ブラウザでは対応していないAPIが多いため、ほとんど動作しません。 カテゴリ内のページの
javascriptプログラマのレベル10 : tech.kayac.com - KAYAC engineers' blog
週末料理をしていて足を切ってしまいました。agoです。 以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。 Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー 当時あまりコミュニティとのつきあいがなかったので、「自分のスキルの絶対位置」、「次のレベルへ行くために必要なもの」を知ることで非常に安心感を感じた記憶があります。 いま確認したところ、「JavaScriptプログラマのレベル10」はないようなので書いてみました。 Perlプログラマ Schemeプログラマ Rubyプログラマ （本家に直接リンクできるURLが無かったため、参照ページへリンクしています） haskellプログラマ 堕落したCプログラマ HTML知識レベル プログラマレベル 企業法務 JavaScriptの業務スキルレベル 判別表 （５
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
PHPコードからJavaScriptコードを学ぶ:phpspot開発日誌
PHPコードからJavaScriptコードを学ぶエントリが公開されています。 まず、PHPのコードを紹介し、JavaScript ではこのように書く、という変換結果が色々紹介されています。 変数スコープ、型、キャスト、空チェックなどの比較がされており、言語仕様の細かな違いについても学習できます。 PHPerでJavaScriptも学びたいという方は参考に出来るかもしれません。 Learning JavaScript from PHP - a Comparison | Lullabot あれ、JavaScript ではどうやって書くんだっけ？という場合のリマインドにも使えます。
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌
まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、本ブログで紹介していない（したものも一部あるかもしれませんが）ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなＷＹＳＩＷＹＧエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなＵＩのＷＹＳＩＷＹＧエディター。jQueryプラグイン SPAW Editor ＵＩが美しいタブ付きＷＹＳＩＷＹＧエディタ →デモページ TTW HT
FCKEditorの次世代バージョンのWYSIWYGエディタ「CKEditor」:phpspot開発日誌
Home | CKEditor FCKEditorの次世代バージョンのWYSIWYGエディタ「CKEditor」がリリースされたようです。 FCKEditor といえば JavaScript の WYSIWYGエディタとしてかなりの定番ですね。 特徴は以下。 ・フルアクセシビリティの強化 ・ハイパフォーマンス ・完全カスタマイズ可能＆多機能 実際の見た目も、次のようなフラットで、よりWEBサイトになじむＵＩになっているようです。 関連エントリ まだまだあったJavaScript製のWYSIWYGエディタコンプリート
データグリッド実現用JavaScriptライブラリ各種:phpspot開発日誌
Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine In order to be presented effectively, information needs structure. データグリッド実現用JavaScriptライブラリ各種。 Excel のようなデータグリッドを実現できるJavaScriptライブラリが多数紹介されています。 どれも目を見張るようなハイクオリティさ＆高機能さで、どれを使うか迷ってしまうほど。 ExtJs Grid dhtmlxGrid Phatfusion Sortable Mootable Sorting Elite Zebra Tables PHP Live Datagrid Table Kit How to paginate, sort and search a table w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
window.onloadに関する記事ランキング | ザッピング-window.onloadとは何かをチェック！
jQueryでリアルタイムにCSSを書き換えるサンプル:phpspot開発日誌
ActiveWidgets Professional Javascript Components