Copy to clipboard ?

Posté le 15 novembre 2008 par Mya

Cette semaine, j’ai dû trouver le moyen de proposer un lien permettant de copier du texte dans le presse-papier dans une page HTML. On dirait pas comme ça, mais c’est pas évident et dans certains cas, ça peut être intéressant ! Après quelques heures de recherche en parcourant les pages de notre ami Google, j’ai pu finalement trouver une solution pour Internet Explorer et Firefox, mais pas pour les autres navigateurs. Voici donc le résultat de ma recherche…

Internet Explorer

Pour IE, j’ai trouvé principalement deux méthodes, avec quelques variantes. J’ai une nette préférence pour la première qui me paraît plus simple d’utilisation.

Méthode 1

La première méthode consiste à utiliser l’objet clipboardData disponible dans l’objet window depuis Internet Explorer 5. Cet objet permet d’interagir avec le presse-papier pour y copier ou y lire des données.

clipboardData possède entre autres la méthode setData(sDataFormat, sData) qui permet d’enregistrer un contenu dans le presse papier. Le paramètre sDataFormat peut prendre plusieurs valeurs, dont “Text” pour manipuler une chaine de caractères ; ce paramètre n’est pas sensible à la casse.

Pour plus d’information sur l’objet clipboardData, je vous renvoie à sa documentation.

On peut donc écrire une petite fonction permettant la copie d’un texte dans le presse-papier de la façon suivante :

Code (JavaScript) function copyToClipboardIE1(sText)
{
   // Le contenu actuel du presse-papier sera écrasé par la valeur de sText.
   window.clipboardData.setData('Text', sText);
   // On ne veut pas suivre le lien après le clic.
   return false;
}

Elle peut être appelée via un lien du type :

Code (HTML) <a href="#" onclick="return copyToClipboardIE1('Texte à copier.');">
   Copier dans le presse-papier
</a>

Méthode 2

La seconde solution que j’ai trouvée consiste à exploiter un champ de formulaire afin de créer un objet de type TextRange qui possède la méthode execCommand(sCommand) qui permet d’exécuter une commande ; par exemple la commande “Copy” permettra de copier le contenu de l’objet dans le presse-papier [Plus d'informations].

L’objet TextRange peut être créé à partir du champ de formulaire grâce à la méthode createTextRange() [Plus d'informations].

La fonction de copie peut alors s’écrire comme ça :

Code (JavaScript) function copyToClipboardIE2(sElementId)
{
   // Récupération de l'objet représentant le champ de formulaire.
   var oElement = document.getElementById(sElementId);
   // Création du TextRange.
   var oRange = oElement.createTextRange();
   // Copie du contenu du champ dans le presse-papier.
   oRange.execCommand('Copy');
   // On ne veut pas suivre le lien après le clic.
   return false;
}

Elle s’utilise donc de la manière suivante :

Code (HTML) <input type="text" id="tocopy" value="Texte à copier." />
<a href="#" onclick="return copyToClipboardIE2('tocopy');">
   Copier dans le presse-papier
</a>

Firefox

Sur Firefox, la solution que j’ai trouvé est plus compliquée… Pour commencer, Firefox n’autorise pas, par défaut, Javascript à accéder au presse-papier. Une configuration est nécessaire de la part de l’utilisateur. Pour la marche à suivre, je vous conseille cette page.

Mozilla fournit un composant nommé @mozilla.org/widget/clipboardhelper;1 permettant de copier du texte dans le presse-papier (Mozilla fournit également d’autres composants, plus généraux qui permettent des actions plus étendues sur le presse-papier) [Plus d'informations].

Même si la configuration permettant l’accès au presse-papier a été correctement mise en place, une confirmation est demandée à l’utilisateur avant l’exécution de l’instruction.

La fonction peut alors s’écrire de la manière suivante :

Code (JavaScript) function copyToClipboardFF(sText)
{
   try
   {
      // On test si la configuration permet l'accès au presse-papier.
      netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
   }
   catch (e)
   {
      alert("Impossible d'accéder au presse-papier.");
   }
   // Initialisation du composant fournit par Mozilla.
   var gClipboardHelper =
      Components.classes["@mozilla.org/widget/clipboardhelper;1"]
      .getService(Components.interfaces.nsIClipboardHelper);
   // Copie du texte dans le presse papier.
   gClipboardHelper.copyString(sText);
   // On ne veut pas suivre le lien après le clic.
   return false;
}

Avec le code HTML associé :

Code (HTML) <a href="#" onclick="return copyToClipboardFF('Texte à copier.');">
   Copier dans le presse-papier
</a>

Autres navigateurs

Malheureusement, je n’ai pas réussi à trouver de méthode équivalente sur les autres navigateurs. On peut, mais je n’ai pas testé, réaliser l’opération en Flash, à ce que j’ai lu, mais ça oblige l’utilisateur à avoir installé et activé Flash sur son navigateur. Bon, comme en plus je n’y connais rien en Flash, je n’ai pas creusé cette piste, ce sera peut-être pour une autre fois !

Dans mon cas, comme je devais copier une URL, j’ai opté pour la solution de mettre l’URL sur le lien de copie, ainsi, les utilisateur qui ne peuvent pas copier à l’aide du Javascript pourront copier le lien via le menu contextuel “Copier l’adresse du lien”, mais cette solution n’est pas toujours utilisable ;)

Fonction générale de copie

Finalement, on peut s’en sortir assez bien avec une fonction de ce type, qui copiera sur IE, copiera sur Firefox si la configuration et l’utilisateur le permettent et affichera un message d’erreur sur les autres navigateur (le mieux étant bien sûr de le pas proposer ce lien de copie sur les navigateurs ne la permettant pas).

Code (JavaScript) function copyToClipboard(sText)
{
   // Cas où on a accès à l'objet clipboardData.
   if (window.clipboardData)
   {
      return copyToClipboardIE1(sText);
   }
   // Cas où on peut tester la configuration de Firefox sur
   else if (typeof(netscape) == 'object' && typeof(Components) == 'object')
   {
      return copyToClipboardFF(sText);
   }
   else
   {
      alert("Cette fonctionnalité n'est pas disponible pour votre navigateur.");
   }
   return false;
}

Pour tester, c’est par là !

Ergo Proxy

Posté le 4 novembre 2008 par Mya

Ergo Proxy est une série d’animation japonaise assez récente puisqu’elle date de 2006. Se déroulant dans un futur assez apocalyptique où seules survivent quelques villes sous des dômes protecteurs, Ergo Proxy est un animé de science-fiction au graphisme et à l’animation remarquable. Même si, je l’avoue, la fin, plutôt floue, m’a laissée un peu perdue (un deuxième visionnage me permettra peut-être de mieux comprendre).

Vu l’ambiance de la série et le style de ses personnages, je ne pouvais pas ne pas faire quelque chose dessus ! Voici dont le set en trois signs et un avatar qu’elle m’a inspirée. Dommage simplement que l’on trouve aussi peu d’images…

Ergo Proxy - Re-L Mayer (Sign)

Ergo Proxy - Re-L Mayer (Avatar 150*150px)

Ergo Proxy - Re-L Mayer (Sign)

Ergo Proxy - Re-L Mayer (Sign 700*200px)

Ergo Proxy - Vincent Law (Sign)

Ergo Proxy - Vincent Law (Sign 700*200px)

Ergo Proxy - Pino (Sign 700*200px)

Ergo Proxy - Pino (Sign 700*200px)

Prison Break

Posté le 21 septembre 2008 par Mya

Ce n’est que récemment que j’ai découvert Prison Break. Je me suis descendu les deux premières saisons à la suite tellement j’ai accroché. Alors je me suis dit que ça méritait bien que je fasse un fond d’écran dessus ! Bon, c’est pas vraiment comme ça que je le voyais au départ, mais je l’aime bien quand même.

Prison Break - Michael Scofield (Fond d'écran 1152*864px)

Prison Break - Michael Scofield (Fond d'écran 1152*864px)

Manau - Dernier Combat

Posté le 12 septembre 2008 par Mya

Bon, j’ai pas encore vraiment pris le pli ! Alors je me lance, dans la catégorie graphisme, section « Inspiration musicale », je vais commencer par la chanson « Dernier Combat » de Manau (tirée de l’album Fest Noz de Panam). J’ai été saisie par ce morceau dès la première fois que je l’ai écouté ; il est magnifique autant par ses paroles que par sa musique qui s’accordent très bien. J’avoue qu’il m’a déjà fait pleurer. Avant tout, je vous laisse l’écouter si vous ne le connaissez pas encore…

Manau - Dernier Combat
free music

C’est après quelques essais sur Indochine (qui feront - je pense - le sujet d’un autre billet), que je me suis lancée dans la réalisation d’une signature, format assez simple, sur ce morceau. J’ai eu du mal à trouver ce que je voulais, comment faire pour représenter, avec les images et les couleurs, ce que je ressentais à l’écoute de cette chanson ? Comment faire ressentir la douleur qu’entraine la perte d’un être cher, le sentiment de culpabilité et de colère que l’on peut ressentir quand on ne peut plus rien faire ? J’ai de la chance, je n’ai jamais vécu ce genre de situation, mais je pense - ou en tout cas j’espère - que je m’en suis pas trop mal sortie. J’ai d’ailleurs réutilisé cette signature plusieurs fois au cours des années qui ont suivis ; je l’ai même reprise pour la retoucher à l’une de ces occasions, ce qui est assez rare pour être relevé !

Manau - Dernier Combat (Signature)

Manau - Dernier Combat (Sign 450*150px)

Ce n’est que beaucoup plus tard, en août 2007, pour un concours sur EDForum, que j’ai eu le courage de reprendre l’idée sur un fond d’écran, format beaucoup plus difficile. J’ai réutilisé certains éléments, on retrouve la photo de l’homme par exemple, et certains concepts, comme les roses. L’ambiance n’est pas exactement la même que celle de la signature, mais je trouve qu’il correspond bien à la chanson également.

Manau - Dernier Combat (Fond d\'écran)

Manau - Dernier Combat (Fond d'écran 1156*864px)

Logos EDForum été 2008

Posté le 10 juillet 2008 par Mya

Le concours de logos d’été pour EDForum (pool 1, pool 2, pool 3) a eu lieu la semaine dernière. Plein de logos sympas !

Voici le logo en deux parties que j’ai fait à cette occasion (à partir de cette image) :

Logos EDForm été 2008

Logo EDForum été 2008

Même si j’ai pas eu beaucoup de votes au concours, je les aime bien ^^

Mes p’tites notes

Posté le 11 juin 2008 par Mya

Voilà un petit moment déjà que je voulais m’ouvrir un petit site dans ce genre. Seulement voilà, je ne savais pas exactement ce que je voulais mettre dedans, ni quel outil utiliser (l’un conditionnant l’autre évidemment ^^). En réalité, il faut remonter à quelques années pour retracer l’histoire de la naissance de ce site…

Au commencement…

J’étais en Première quand j’ai appris à faire un peu de traitement d’images, vous savez, faire un fond d’écran pour son bureau, une petite image à mettre en signature ou en avatar sur un forum etc. Je m’essayais aussi à la poésie et à la prose. Je me suis donc fait un petit site pour y mettre mes création. Un site tout simple, en HTML, construit avec Front Page et plus tard Nvu. Mon pseudo sur les forums et les jeux étant Arkania à l’époque, je l’ai nommé Arkania’s Home. J’avais dans l’idée d’y publier aussi les créations des visiteurs qui le voudrait, mais ça n’a pas duré !

Un grand projet…

Un peu plus tard en Terminale, j’ai découvert le PHP. Une révolution dans mon petit monde, je me voyais déjà programmer un CMS (même si je ne le nommais pas comme ça à l’époque), un truc énorme, puissant, qui une fois terminé me permettrait en gros de faire tout ce que je voudrais, de poster mes créations avec maints détails ordonnés, classés tout cela de manière totalement automatique. Un vaste projet… Qui est resté à l’état de réflexion utopique, revenant périodiquement ; je commençais de petits descriptifs de ce que je voulais, ébauches de spécifications fonctionnelles, seulement avant d’avoir vraiment mis à plat ce que je voulais, d’autres idées encore plus compliquées me venaient. Cette réflexion par intermittence m’a quand même tenu presque 5 ans puisque c’est seulement pendant mon année de master 2 que j’ai finalement compris que je n’irais jamais au bout de ce projet. Entre temps, j’avais aussi réalisé que de très bon outils existaient déjà tous prêts ! :euh:

On modernise un peu…

Mon vieux site commençant à paraitre vraiment dépassé, j’ai quand même, en avril 2005, sorti une nouvelle version, appelée cette fois Arkania’s Library, avec un nouveau design, des catégories un peu mieux organisées et quand même un minimum de PHP derrière me permettant d’inclure un menu sur toutes les pages facilement. C’est toujours cette version qui est en ligne, même s’il n’y a plus beaucoup de mises à jour ; toutes mes vieilles créations sont dessus, certaines seront sans doute re-postées ici mais pas toutes, allez y jeter un œil si le cœur vous en dit ;)

On ne peut pas réinventer la roue tout le temps…

Ayant abandonnée mon grand projet visionnaire, j’ai décidé d’utiliser un outil tout prêt tout beau. … Oui, mais lequel ? Les moteurs de sites et autres CMS, ce n’est pas ce qui manque sur la toile. J’ai finalement opté pour quelque chose d’assez léger : Wordpress. En fait, mon frère l’utilise pour son site et ça m’a aidée à choisir puisqu’il avait déjà testé et même développé certains plugins dont je pouvais profiter ! :smile:

Voici donc ce qu’on pourrait appeler la version 3 de mon site, pour les titres, j’ai toujours autant d’imagination… Les p’tites notes de Mya reflète quand même assez bien mon idée de ce site : un endroit sympa où je peux poster sur un peu tout : mes création, les trucs que je découvre en programmation et qui m’ont demandés pas mal de recherche, les bouquins que j’ai lu (si j’ai le courage :$ )…

Bon, pas facile d’écrire son premier article, mais je crois que je m’en sors pas mal, non ? ;)