※こちらの記事が「先月もっとも多く読まれたノート」の一つに入りました。ありがとうございます! こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 ✔︎この記事の内容 実務、学習のため問わず、Web制作をするに当たって便利なツールと使いかたをご紹介します3年ほど独学でWebサービスを作り運用したり、フリーランスとしてお客さまのサイトを作る中で、様々なツールを見つけました。 初心者の方ほどこうした作業効率が上がるツールを知っていた方がいいと思うのですが、周りにエンジニアがいないため情報が流れてこなかっ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ?」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ???」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
作成:2012/10/29 更新:2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか?そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の2つご覧ください。(※ 2015/06/25 2015/06/28追記) Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました
ブログを日々書いている人たちって、どうやって1つの記事を組み立ててるんでしょうか。 テンプレがあって当てはめるの?それとも、見出しを先に書いて中身を埋めていく? みなさんそれぞれのスタイルがあるんだと思います。 私はというと…何も考えずに書きたいことを頭から書いてます。途中で「ココらへんで見出しかな?あ、この文にはあの写真が使える!」なんて、行き当たりばったり。まるで私の人生のよう… 行き当たりばったりの書き方をしていると、途中で主旨がズレて論点バラバラの記事になることも。時には、書き上がった後にゴッソリ中身を消したりします。 テンプレートみたいなものがあれば、道筋だてて文章を埋めていけるし、「どうしても書けない!」と行き詰まった日の道標にもなるのかもしれません。 あんまり決めすぎてもワンパターンになってつまらないブログになりそうだから、使いドコロは考える必要がありそうですけどね。 長くブ
www.youtube.com 名前的にはやぎビームなんですけど、いぬビームも捨て難い これは 川見てる Advent Calendar 2020 4日目の記事です。 多摩川は奥多摩の方から流れてきます。 奥の多摩。 下っていくと、どんどん町になっていくのですが、流域はそれなりに野生があります。 川原に辿りつくまでに、結構やぶを越えないといけない場所も。 増水していないときの河川敷はとても広いです。 長らく川崎市民をやっていたので、多摩川にはちょっと思い入れがあります。 川を越えると東京都がある。 これは二子玉川(にこたま)近くの楽天本社ビル。 河口には羽田空港があります。 ではさようなら。 はてなブログのコミュニティではスターをつけるんだな! 私もスターをつけてしまう。前ならコメント付きでブックマークしていたような気もするが、今ブックマークすると何か......迷惑がかかりそうな気がして
モバイルWeb開発に役立つ!Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura(Slack) 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏(以下、ポール氏)は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle
下記の文章を比較してください。 Betty Botter bought some butter, But, she said, this butter's bitter; If I put it in my batter, It will make my batter bitter, But a bit of better butter Will make my batter better. So she bought a bit of butter Better than her bitter butter, And she put it in her batter, And it made her batter better, So 'twas better Betty Botter Bought a bit of better butter. 下記の文章を,ヒヒ較してくだちい. Be
WEB屋を名乗って仕事をする以上、作業効率を考える事は必要最低限の努力だと言うお話は何度かこのブログでもさせて頂いてきました。 まぁしかし、ぶっちゃけ何が自分にとって作業効率に繋がるかはやってみないと分からないですよね。作業時間の見直しをするだけで効率化に繋がるかもしれないですし、ツールをもっと使いこなすことだったりするでしょうし、コミュニケーションを円滑にすることで作業効率につなげたりと、何が一番効率化に直結するかは人それぞれだと思います。 ただ、何度かこのサイトでもWEBサイトを作る上で便利そうなジェネレーターの存在を共有させて頂いてきましたが、こういうツールは知ってるのと知らないのとでやはり大きな差が出てくることはやっぱり多いと思います。特に最近はWEBに強いクライアントの存在も目立ってきて、自分だけじゃなく、お客さんにとっても、もしかしたらプラスになるジェネレーターの類も多いんじゃ
テキストボックスに比較したい文章をコピペしてボタンを押すだけで2つの文章でどこが変更されたのか、差分の確認ができるネットサービスが「difff(デュフフ)」です。名前はちょっとネタっぽいですが、実用性は高く、日本語のテキストでもOKです。 difff - デュフフ http://altair.dbcls.jp/difff/ サイトの見た目はこんな感じ、テキストボックスが2つ上下に並んでいるので、変更前の文章と変更後の文章をそれぞれ貼り付け、最後に「比較する」ボタンを押すだけ。 結果はこんな感じで変更前が左、変更後が右に表示されます。段落が左右で揃っていて、変更部分はハイライト表示されるので、どこが異なっているのかが一目で確認できます。 ぱっと目で見ただけではどこが変わっているのかわからないようなものでも…… このツールであれば確認できます。このケースだと、カッコが半角から全角に変わっていま
スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。 [ad#ad-2] ジェネレーター:ベーシック系 ジェネレーター:ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど ジェネレーター:ベーシック系
私がSEOを始めたときから住太陽さんやその書籍からたくさんのことを学ばせていただきました。 このサイトには多くの人が学ぶべき正しいSEOの情報が詰まっています。このサイトの情報をもとにして自身のウェブサイトに合うようにアレンジすることで、成功に近づけると思います。 日本でトップのSEOコンサルタントを3人挙げろと言われたら、絶対に住太陽さんを含めます。実績と経験、知識ともに間違いなくトップです。でも、住さんの最も素晴らしいところは、知識の共有です。住さんが惜し気もなくこのサイトで公開している情報は、ウェブのどこにもない独自のもので、かつ極めて有用です。僕自身も多くのことを学ばせてもらっています。 SEO(検索エンジン最適化)の意味SEO(Search Engine Optimization: 検索エンジン最適化)とは、自社のウェブページがGoogleやBingなどの検索結果で上位に表示され
HiFi RegExp Tool - Write and Test Regular Expressions in Real-Time その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」 ボックスの中に、正規表現を入れるだけで、リアルタイムにページの内容が正規表現に沿ってマッチング&ハイライト表示され、どの正規表現がどういう意味を表すのかというのが一目で超クイックに分かってしまう便利ツールです。 ボックスに入れられた正規表現に沿って次のように、ハイライト表示されて、カラフルに色分けしてくれます。マッチしたテキストの一覧もページ下部に色付きで分かりやすく表示してくれます。 ページ内のテキストはクリックすることで自由に書き換えることも可能です。 サイドバーには正規表現のチートシートも掲載されています。 これはかなり便利。正規表現入門の高速道路ですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く