ども、ゆうせいです。文章作成スピードは速い方だと勝手に思っていますが、実はそれには理由があるのです。面倒なHTMLなどのタグを一瞬で展開し、タグとタグの間にクリップボードの文言を挿入したり、それらを全部アプリにまかせているからなんです。 というわけで、Macの無料アプリ「Dash」を使って、文章作成スピードを爆速にしようぜって話をします。 補足と言ってはなんですが、 “文章入力スピードをn倍速くする「Markdown記法」について語ろう” って記事も書いていますので、お好みで選んでいただければと思います。 HTMLのタグをポチポチ打つのしんどい! しんどいってのは正直なところ言い過ぎましたが、これを覚えてしまうともう無しではしんどいのが実状です。 たとえば、見出しを設定するときのHTMLタグは、 <h2>見出し</h2> ですよね。 これって、どうやって書いてます? 一文字ずつポチポチと
勉強会での発表資料を作成するにあたり、まずMarkdownで話そうと思うことを適当にメモしてるうちに、なんか発表資料このままで良くない?と思えてきました。別に レイアウトや配色のセンスに自信があるわけでもない し。。 で、最初 "markdown pagination" でググってみるとあまりパッとしたのがなかったのですが、"markdown presentation" にしてみると出るわ出るわ。しかもどれも結構よさげ。 というわけで出てきたものをメモがてら書き留めておきます。結論からいうとググって一番上に出てきた "Remark" が今回の要件に(ほぼ)マッチしていたので、他はまだ使ってません。 Remark 長所 GitHubでソース公開されてる 無料 ログイン不要 不満があれば自分で修正してpull request送れる Swipe 長所 テンプレートやフォントが複数用意されてる(っ
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード(カーソルキー以外)だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での開発環境 mac mini (2011) 19インチのシングルモニタ GUI系ツール Sublime Text 2 プログラマ向けのテキストエディタ。 これがないと仕事にならない。 以下、必須なPackage。 Vintage vimっぽいキーバインドにする
スライドを作りたい photo by James Jordan 勉強会に出席するような意識の高い読者諸賢であれば、各々様々な方法でスライドを作っているかと思います。 僕は、markdownを使って楽にカッコイイスライドを作ろうと、今までいろいろ試行錯誤してきたのですが、どれも僕の要求を満たすような感じではなくて、結局Keynoteを使ってせっせとスライドを作っていました。 Decksetが凄く良い Markdownからスライドショーを生成してくれる「Deckset」というMac用のアプリを2000円も出して買ってみたのですが、凄く良かったのでご紹介します。 https://itunes.apple.com/jp/app/deckset-turn-your-notes-into/id847496013?mt=12&uo=4&at=10l8JW&ct=hatenablog Deckset fo
メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリ で、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。 キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。 そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。(なお、私の環境はMac + S
最近HTML/CSS/JavaScriptなどを初学者の方向けに教える機会がすごく増えきました。初学者の方ができるだけ詰まらずに、効率的に学習するための手順をいろいろな方と相談しながら、書きなおしています。 (11-09 12:45) Progate, atomを追加 導入編🐠 Webサイトを作ることは楽しい! プログラミング経験ゼロだが180日で180個のウェブサイトを作るプロジェクトがゴールまであとわずかに プログラミング経験0のデザイナーさんが、毎日1つサイトを作っていったお話です。最初はテキストとリンクが並ぶだけのサイトでしたが、少しずつゲームやチャットなどが作れるようになっていきます。 今知っている知識だけで、作れるWebサイトを作っていく。そして、自分の知っている2つの知識を組み合わせたり、1つやりたいコトのためのパーツをGoogleに教えてもらうくらいが、挫折せずに続けられ
ブラウザをリロードして欲しい時に勝手にリロードしてくれるウェブ開発者向けのMacOSX用アプリケーションです。 HTMLやCSSなどのファイル編集を監視し、保存と同時に今開いているブラウザのタブをリロードします。動作確認をするためにブラウザをリロードする手間が省きウェブ開発に快適さをもたらします。 対応するブラウザは、現在のところChromeとSafariです。 ダウンロード 使い方 CHANGELOG フィードバック 過去のビルド ダウンロード 以下のリンクからzipをダウンロードし、適当な場所に解凍すると使えるようになります。動作確認はMaxOSX Lionで行なっています。 WatchReload-0.0.1.app.zip 使い方 WatchReloadを起動すると、メニューバーにWatchReloadのメニューが表示されるようになります。 メニューからStart Watching
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない(一部再生できるブラウザアプリはありますが)ので、困った困ったなのです。 そこで次代を担う(であろう)コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる! 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
巷で話題フットーしそうだよぉ…と言うか話題沸騰しておりますテキストエディタ、「Sublime Text 2」。 Sublime Text: The text editor you’ll fall in love with あおり文句は「The text editor you’ll fall in love with」。 英検2級の私が全力で和訳してみたところ「このテキストエディタは愛欲が凄い」みたいな事だと思うのですが、何はともあれずっと気になっていたので先日ようやっとDLしてみました。 参考記事 DLに当たって参考にしましたのは以下の記事。なんだかとっても便利そうなにほひ。 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog ”恋に落ちるエディタ”「Subl
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ! これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも?)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い!なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
Panic のブログに「Top 20 Secrets of Coda 2」 という記事があったので意訳してみました。Coda 1 の時からある機能も載っていましたが、それらもそのまま載せています。 別々のファイルを分割表示する方法 別々のファイルを分割表示する方法です。大きく分けて2つのやり方があります。 1. ウィンドウを分割した状態で、別のファイルをOption+ダブルクリック、またはパスバーにファイルをドラッグ&ドロップ。 HTML + CSS + ライブプレビュー 縦に3分割してHTML、CSS、プレビューを表示させると開発が楽です。 HTML、CSSどちらを修正しても自動でプレビューが更新されます。 サイトをグループで管理可能 iPhone のホーム画面のようにサイトをグループで管理できます。 タブをアイコンではなくてテキストで表示 タブバーの下をドラッグするか右クリックから「テ
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
Coda 2 が5月24日の0時に発売され、「本日限り半額(App Storeで ¥4,300)」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうpするレビュー記事を見てから購入予定だからですよ :) ホレホレ…ン? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く