はじめに 現在私が参画しているプロジェクトでは、 Gruntを使ってフロントエンド開発の環境構築等を自動化しております。 プロジェクトを進めていくにあたり非常に大きなgruntfileになってしまったので、 ひとまずパラメータの分割を試したのでそのまとめになります。 手順 今回私が採用した方法は マイクロソフト製のJavaScriptフレームワークのWinJSで用いられている方法を採用しました。 winjs/winjs 今回の作例では、generator-angularで作成したGruntfile.jsの connectタスク内のportとhostnameをパラメータとして別ファイルに書き出す事とします。 なお、generator-angularの導入について下記の記事を参照して下さい。 AngularJSジェネレータでコマンドを使ってみる パラメータ用のファイルを作成します。 grunt

TypeScriptで複数ファイル構成のプロジェクトを扱う方法について書いてみる。日本語の入門記事や試してみました系の記事で勘違いされてることがたまに見受けられるので、整理してみる。 公式のModules in TypeScriptを既に読んでおられるような御仁は回れ右していただいても結構です。 やりたいこと ソースファイルをモジュールごとに分割して管理したい 実行環境はNode.js or ブラウザ 例えば、こういう処理があって、 // main.ts function trimLeft(str: string): string { return str.replace(/^\s+/, ''); } var input = document.getElementsByTagName('input')[0]; input.value = trimLeft(input.value); tri

手前の方にポップアップしてメッセージを伝え、ユーザーの了承を促すアラートウィンドウ。JavaScript標準の window.alertでは味気ないので、もっと HTML5的に表示してみる。 モーダルとだけ言うと日本ではあまり聞き慣れない言葉だが、ユーザーインターフェイス用語としてはかなり昔から存在する「モーダル・ダイアログボックス」を示す。ユーザーとの対話が終了するまで必ず画面の最も手前に居続け、表示されている間はその外にアクセスさせないようになる、よくあるダイアログボックスをいう。Web製作の現場ではポップアップと呼ばれることも多い。 JavaScriptの window.alertや Windows APIの MessageBox で表示されるメッセージウィンドウもモーダルの一種である。 AngularJSそのものはユーザーインターフェイスを提供しないのだが、Bootstrapを組み

OpenAIのWhisper文字起こし25MB制限を解決するPHP, Laravel, ffmpegを使ったファイル分割の例 OpenAIのAPIを使った音声の文字起こしは、今や多くのアプリケーションで利用されています。この記事では、特にWhisper文字起こしの25MB制限に焦点を当て、PHP, Laravel, ffmpeg…

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして！ アメーバゲーム部門でディベロッパーをしております、なるげと申します。 現在、私は「ガールフレンド（仮）」チームに属していますが、前は「フレンダリアと魔法の指輪」というファンタジーRPGで、モンスターのアニメーションを担当していました。 ガールフレンド（仮）でも一部CSSアニメを使用してキャラクターを動かしています。 今回は、ガールフレンド（仮）に登場するガールを例に、キャラアニメの制作をご紹介したいと思います。 ガールフレンド（仮）とは 「ガールフレンド（仮）」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲー

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webのテキストエリアの貧弱さには皆が辟易しています。だからこそツールバーを付けたり、中でHTMLが使えるようなWYSIWYGエディタに人気が集まります。しかしそうしたソフトウェアは柔軟性が高くなく、自分好みにならないケースもあるでしょう。 そこで紹介したいのがQuillです。リッチなテキストエディタとAPIというのが売りの柔軟なカスタマイズ性が売りのWYSIWYGエディタです。 Quillの使い方 コードは次のようになります。 var basicEditor = new Quill('#basic-editor'); basicEditor.addModule('toolbar', { container: '#basic-toolbar' }); ツールバーはモジュールとして追

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近にわかに話題に挙がっているのがGoです。多数のライブラリが世界中で開発されています。そんな中、Goに含まれるツールとして注目を集めているのが文法の整形ツールgofmtです。 プログラミングソースは各人によって形が変わるものですが、それをGoの提示するフォーマットに整形してくれるのは便利です。それを受けて生み出されたのがjsfmt、JavaScript用のフォーマット整形ツールです。 jsfmtの使い方 最も簡単な使い方はインデントなどの整形でしょう。例えば以下のようなコードがあります。 var values = [1, 2, 3, 4];_.reduce(values, function(sum, value) {return sum + value;}, 0); ワンライナー

リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも

新卒が覚えておくべきMacのテキスト入力系ショートカットキー15個ハウツー テキスト編集作業では単純なタイピング時間よりも、修正・カーソル移動など様々なところでロスタイムが発生しています。そのロスタイムを限りなく0にするマックの便利なショートカットをご紹介します。

ブランチを簡単に切るようにアップロードがしたいんです！ いろんな演出を試したり、UIを変更したり、ブランチを簡単に切るようにアップロードがしたいんです。 で、いろんなひとにサクッと確認してほしいんです！ 日付ディレクトリを自動で作ってアップロードしまくる！ こういう感じのバージョンにしたディレクトリをいっぱい作ってそこに展開しまくります。 わかりやすい！やりかた grunt-sftp-deploy を使います ビルドIDを作成(日付ディレクトリになるやつ) publicディレクトリの中身を、日付ディレクトリにアップロードするようにsftp-deployのdestを設定 # Grunt v0.4.5で動きます # 日付を作る # build-versionオプションが設定されてなかったら、いまの時間を設定する revision = grunt.option('build-version')

B! 26 0 0 0 先日書いたとおり1 ちょっと前に新しいMacに移行したのですが、 その際にアプリをHomebrew Caskで出来るだけ管理できるように移行しました。 その際、ちょこちょこ前と変わってる部分もあったのでその辺のまとめ。 Homebrew Cask Homebrew Caskの更新 Caskファイルを追加 Caskファイルをレポジトリを作成/タップしてCaskを追加 すでにインストールされてるアプリの対応を調べる Homebrew Cask 前に書いたHomebrewの拡張:brewdler, tap, cask にあるように、 Homebrewでは Cask という拡張を使って通常のアプリも管理できるようになります。 これが結構簡単にできるので、去年ちょっと流行りかけた BOXEN を追い越して現在流行りかけてる感じです。 ということで、BOXENは以前まだLion