[VSCodeでもっと楽になりたい] SFTPで楽になる

Bracketsが死んでVSCodeを使うようになって、軽いし使いやすいので重宝していますが、デフォルトだとちょっと痒いところに手が届かない、やっぱり作業は楽にしたいので、色々拡張を試しています。

ふと思いつくような拡張は大体世界の誰かがすでに作っているので、「あ、こういうの欲しいな」って思った時にすぐ追加できるのが手軽でいいですね。

SFTP

僕はウェブデザイナーなので、FTPが繋げられないと仕事ができなくてお金が稼げなくて餓死してしまいます。
SFTPは、VSCode内でFTP接続を可能にする拡張です。
できることは基本的によくあるFTPソフトと変わらないのですが、いちいちエディタとFTPソフトを往復したりしないで使い慣れたVSCodeのUIでアップロード/ダウンロードができるのは楽ちんだなと思っています。
細かい特徴はマーケットプレイスのページでご確認ください。

Very powerful, with smart features. Very simple, requires just three lines of config! Very fast, finished in a blink.

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

個人的に一番気に入っている「差分表示」

特徴にも記載されているDiff local and remote(ローカルとリモートの差分表示)がVSCode内でできることですね。
昔Macが32bitアプリが動く時代には、YummyFTPというアプリがあって外部アプリによる差分表示をサポートしていたのですが、作者の方がお亡くなりになったそうで64bitの対応は事実上無くなってしまったためOS Catalina以降は動作しなくなってしまいました。
なお、FTPソフトに差分表示をサポートしているものは他にもあります。

ForkLift 3

https://binarynights.com/

こういったFTPソフトが差分表示をサポートしている、というのは、たいていファイルを選択して差分表示と選択すると外部のDiffアプリが開くような仕様になっています。
上記のForkLiftもランディングページの説明に「Compare two text or images files with Xcode’s FileMerge, Kaleiodoscope, Beyond Compare, or Araxis Merge.」と記載されているので、 ForkLiftアプリ内で完結しているわけではなく、別のアプリが立ち上がると思われます。

個人的にはコードを見るときにFTPソフトに行ったりエディタに行ったりするのが面倒なので、VSCode内で差分表示まで完結できる方がメリットがあると思っています。

ファイルを右クリック→「Diff with Remote」

VSCodeで左がリモート・右がローカルが開く 差分のある<main>の部分がハイライトされている。

他にもオートアップロード(一長一短だが)があったり、除外ディレクトリを指定したりとか、色々便利です。
使ったことないな、って人は是非使ってみてくださいね！

Posted on
コメントする

[concrete5 サイト制作] 社会福祉法人 恩賜財団 東京都同胞援護会

社会福祉法人 恩賜財団 東京都同胞援護会のサイトを10年ぶりにリニューアルしました
https://doen.jp/

昔MTで作ったせいで更新がすごく大変だったものをconcrete5にしてクライアントの更新作業が楽になるように設計。
もうずっとリニューアルしたかったんですよ

Screen Shot 2017-04-03 at 16.15.24-fullpage

Screen Shot 2017-04-03 at 16.15.39-fullpage

Screen Shot 2017-04-03 at 16.16.09-fullpage

Screen Shot 2017-04-03 at 16.16.03-fullpage

やったこと

  • デザイン
  • HTML/CSS/JSコーディング
  • レスポンシブ
  • concrete5組み込み
  • フォーム作成(concrete5外)
  • 承認フロー
  • 運用マニュアル作成

つらかったこと

  • 同じフォーマットにひたすら住所やら電話番号やら座標やらを入力していく作業
    →xmlかcsvでインポーター使えばよかったと反省。あるいはデータ投稿だけしてもらうバイトを雇えばよかった。
  • 承認フローがなかなかうまく機能してくれなくてどハマり
    →参考文献がなかったのと、フォーラムに質問するということを考えなかったので反省。次からはググってもわからない問題はフォーラムに質問しよう。
  • さくらサーバーで通知メールが飛ばない問題
    →もうどうしようもなくてフォーラムに相談して解決してもらった。

更新性が高い設計にするために汎用性をもたせつつ、デザインを両立させるという作業に対して、非常にモチベーションが高く保てたかな、と。
今回制作ページは160ページほどで、concrete5で作らなかったらおそらく3倍くらいの作業時間が必要だったのではないかなーと思います。

リリースしたおかげで今月は暇になったからゆっくり療養します。もう体がバキバキ。

Posted on
コメントする

[報告]Unity(の勉強を)始めました

どうしてもパズルゲームが作りたいので、Unityの勉強を始めることにしました。
アイデア段階では面白いんですよ、絶対、いや、たぶん、もしかしたら…、万が一…

ただ、アイデアをどうやって形に落とし込んでいくか、そもそもUnityの使い方まったくわかってないじゃんとか、そういうことはどうでもよくて、とりあえずなんかしら作ってみようと思いました。

Unityの開発ツールをちょっと触ってみた感じですが、Javascriptが使えるというのはかなりメリット大きいんじゃないでしょうか。
Javascriptならある程度書けますので。

とりあえずこの辺の本を買って勉強してみようと思います。

なお、Javascriptの難易度によっては途中で投げ出すかもしれません。

Posted on
コメントする

[jQuery]wordpressで画像にリンクしてるときだけlightboxしたい

wordpressで記事書いてて思うのは、aタグは普通のページリンクと、拡大画像表示用と2種類あって、毎回毎回aタグにclass=”lightbox”って書くのがめんどくさ…
いや、手間だしヒューマンエラーもあるようなので、記事を書く際に画像を入れたら勝手に拡大画像へのリンクが付く事ですし、めんどうな事は機械にやってもらいました。

[javascript]
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.lightbox.js"></script>
//↑lightboxのプラグイン

$(function(){
$(‘div.entry-content a’).has(‘img’).click(function(){
$(‘div.entry-content a’).lightbox();
});
});
[/javascript]

「.has()」でimgタグがあるかを判断して、あった場合にlightboxするようにしてます。
if使わなくていいのが楽でいいね。

このページを参考にしました。
https://js.studio-kingdom.com/jquery/traversing/has

追記

ご指摘をもらいました。

これでいいらしいです。ちゃんと動きました。
[javascript]
$(‘.entry-content a:has(img)’).lightbox();
[/javascript]

Posted on
コメントする

[jQuery]$(document).readyと$(window).loadの違い[自分メモ]

今までずっとjqueryの実行タイミングをデフォで$(document).readyで書いてました。
今更こんな事書いたら、いろんなお客さんから怒られそうですが、今まで作ってきたjsアニメーションの実行のタイミングは何かをクリックしたら動かすといったような、必ずトリガーが何かしらあるものでした。

で、ちょうど今ページ読み込みと同時に動くアニメーション作っているのですが、PC環境だと問題なくてもスマホで問題があるんすよ。
wifiならまだしも、3G環境でただでさえ読み込みに時間がかかる状態で実行のタイミングが$(document).readyだと、スマホでデータの読み込みが終わった時点でアニメーションが終了しているという本末転倒な事態になる事が判明。

$(document).readyってなんぞ

DOMが読み込まれた時点で実行します。
htmlの構造が読まれた時って事だもんで、画像ファイルの読み込みを待たずにスクリプトの処理を開始します。

じゃあ$(window).loadってなにさ

DOM内に含まれる全ての要素の読み込みが完了した時点で実行します。
なので、今回の懸念である「3G回線」で画像の読み込み待ってる間にアニメーション終わっとるがな、という事態を解消するにはうってつけだったわけで。

ただ、調べている間に見つけたサイトには$(document).readyの方が良い的な事書いてあったので、$(window).loadはあまり推奨はされていないみたいですね。
うーん、もうちょっと勉強が必要だなぁ。

今気づいたけどもう2ヶ月もconcrete5に関する記事書いてないや…。

Posted on
コメントする

[Concrete5]メールフォーム送信時にページの先頭に移動してしまう問題

前回の記事同様、Concrete5についているフォームブロックには結構不満があってですね。

送信ボタン押した時に、ページの先頭に行っちゃうんですよ。

例えば「お問い合わせ」っていうお問い合わせ専門のページを作って、コンテンツ部分はフォームのみしか存在しないっていう場合は、ページの先頭に戻ってもウインドウ上にはフォームのエリアが見えているから、エラーがあった場合や、確認画面、完了画面も見えるから言う程問題じゃないんですが、
縦1000pxくらいの紹介コンテンツがあって、「申し込みは以下のフォームから」みたいなフォームを含むページの場合、送信ボタンをクリックした後にページの先頭に戻ってしまうと「あれ？これ送信できたのかな？」って思って改めてそこまでスクロールして見てもらわなきゃいけないという、ユーザに負担をかけるユーザビリティ的に非常に粗悪なものになってしまう訳です。

で、どうしたもんかなーと考えたあげく、フォームブロックのカスタムテンプレートではどうにもなりませんでした。
というのも、submitボタンクリックした時点で、フォームのID取得のためにURL内に「#」が使われてて、フォーム部分へスクロールするためのhtml側の「#」が重複して使用出来ないっていうのがあって、もう私諦めようと思いました。
お客さんには説明して、「フォームだけは別ページにしてもらえませんか」って懇願して、許してもらおうと思ったんですが、
今をときめくjavascriptちゃんなら！javascriptちゃんならきっとなんとかしてくれるッ！と思い、試してみました。

[javascript]
$(function(){
var getURL = location.href; //URLを取得
var contactScroll = $(‘#contact’).offset().top; //#contactの位置を取得
if ( getURL.indexOf( "submit_form#" ) != -1 ) { //indexOfでURL内に含まれる文字列"submit_form#"を検索して、存在した場合の処理
window.scrollBy(0, contactScroll); //ウインドウを#contactの位置までスクロール
}
});
[/javascript]

前述の様に、フォームブロックでフォームIDを取得してURLに#が使われてるなら、URLに入ってるフォームIDを逆手にとってやろうと。

↓フォームの送信ボタンをクリックしたら、URLにクッソ長いパラメータが付くのですが、共通して「cID」とか「stackID」とかが存在します。
https://www.xxxxxx.xcom/index.php?cID=1&stackID=169&bID=69&btask=passthru_stack&ccm_token=1363257182:45a7934ae05865ab764c648a45552a6b&method=submit_form#1363252323&listbeginp=

フォームのブロックに必ずつくのは「submit_form#」なので、javascriptでURL内を検索して「submit_form#」があったら「#contact」の場所までウインドウをスクロールしてやれば良いと気づいたんです！

あぁ、解決できてホント良かった！！

Posted on
コメントする

今さら…。jQueryとprototypeの共存とか…。

私は最近はもっぱらjQueryしか使ってないのですが、４〜５年前のトレンドというか、なんというか、prototype派の人もいたわけですよ。

でですね。

「prototype使ってて、今後はjQueryに移行したいけど、今の段階だとprototypeも残したい」みたいな案件もあるんですねぇこれが。

prototype使ってるhtmlにそのままjQuery入れると、”$”が共通して使用しているため、競合してしまってどっちかが動かないか、もしくは両方全く動かない状態に陥ります。

じゃーどうしましょう。

こーしましょう。
まず、prototype.jsから読み込みをします。
で、noConflictの記述をします。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-x.x.x.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>

上記まで書けたら、解決までほぼ完了。

と言いたいところですが、jQueryで使用している”$”を全て”j$”にする必要があります(jQueryのソースファイルじゃなくて、プラグインで使用している”$”です)。

例えば、jQueryでスクロールを制御しているのであれば、

[javascript]
$(function(){
$(‘a[href^=#]’).click(function() {
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

と上記のように書いてあったとして、それを下記のように書き換えます。

[javascript]
j$(function(){
j$(‘a[href^=#]’).click(function() {
var href= j$(this).attr("href");
var target = j$(href == "#" || href == "" ? ‘html’ : href);
var position = target.offset().top;
});
return false;
});
});
[/javascript]

とりあえず全部の”$”を”j$”にすりゃOKです。”$”を”j$”に全置換したらいいんじゃないかしら。

これで競合せずにjQueryとprototypeが使用できるようになります。

でもまーぶっちゃけ、jQueryとprototypeを両方使うなんて普通に考えたらしないんだけど、案件次第でさ…。

Posted on
コメントする